web前端sprite，精灵图，雪碧图

2021-02-08 作者：匿名阅读：1626次

前言

本文重点解决web前端spie，精灵图，雪碧图问题,希望能够帮助到你

css sprite

俗称：精灵图，雪碧图，指将整个页面不同的图片or图标合并在一张图上；
优点：使用CSS Sprite 可以减少网络请求，提高网页加载性能，不会出现网页上端加载完毕下面还在加载中这一问题

缺点：如果后期更改其中某一图标，且其像素大小发生改变，需要重新对所有图标进行定位

精灵图制作：

photoshop选择透明图层，将需要的图标和图片放入

测试用图：

点击并拖拽以移动

%201%20<!DOCTYPE%20html>
%202%20<html>
%203%20%20%20%20%20<head>
%204%20%20%20%20%20%20%20%20%20<meta%20charset="utf-8">
%205%20%20%20%20%20%20%20%20%20<title></title>
%206%20%20%20%20%20%20%20%20%20<style%20type="text/css">
%207%20%20%20%20%20%20%20%20%20%20%20%20%20#box{
%208%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin:%2050px;;
%209%20%20%20%20%20%20%20%20%20%20%20%20%20}
10%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
11%20%20%20%20%20%20%20%20%20%20%20%20%20#box%20a{
12%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;
13%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2074px;
14%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%2020px;
15%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border:%201px%20solid%20#ccc;
16%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color:%20black;
17%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size:%2012px;
18%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-decoration:%20none;
19%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20center;
20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-top:%20none;
21%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-top:%2054px;
22%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-image:%20url(icon.png);
23             }
24             #box #zone{
25                 border-top:1px solid #CCCCCC;
26                 background-position: -17px 4px;
27                 background-repeat: no-repeat;
28             }
29             #box #zone:hover{
30                 background-position: -17px -98px;
31             }
32             #box #mail{
33                 background-position: -12px -186px;
34                 background-repeat: no-repeat;
35             }
36             #box #mail:hover{
37                 background-position: -12px -286px;
38             }
39         </style>
40     </head>
41     <body>
42         <div id="box">
43             <a href="#" id="zone">空间</a>
44             <a href="#" id="mail">邮箱</a>
45         </div>
46 
47     </body>
48 </html>