CSS-sprit 雪碧图

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片

这样图片会同时加载到网页中就可以避免出现闪烁的问题

这个技术在网页中应用十分广泛，被称为css-sprite ，也成为雪碧图

雪碧图的特点：

一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户的体验

局限只适用于背景图片不适用于GIF

通过改变background-position的值，来从css-sprit中选择所需的图片进行加载，即清除了首次加载白闪烁的现象，也压缩了内存，提升了用户体验。

雪碧图的使用步骤：

1、先确定要使用的图标

2、测量图标的大小

3、根据测量的结果创建一个元素

4、将雪碧图设置为元素的背景图片

5、设置一个偏移量以显示正确的图片

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <title>Document</title>

 8     <style>

 9         a:link{

10             display: block;

11             width: 100px;

12             height: 100px;

13             background-image: url(../img/bg.png);

14         }

15         a:hover{

16             background-color: aquamarine;

17         }

18         .box1{

19             width: 290px;

20             height: 100px;

21             background-image: url(../img/w3cschool.png);

22             background-position: 0 -150px;

23         }

24        .box2{

25            width: 130px;

26            height: 45px;

27            background-image: url(../img/w3cschool.png);

28            background-position: -380px -52px;

29

30        }

31

49     </style>

50 </head>

51 <body>

52     <div class="box1"></div>

53     <div class="box2"></div>

54     <a href="javascript:;"></a>

55

56 </body>

57 </html>

效果图

巴特西

CSS-sprit 雪碧图

最新文章

热门文章