CSS 雪碧图

作用

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
 雪碧图的使用步骤：
            1.先确定要使用的图标
            2.测量图标的大小
            3.根据测量结果创建一个元素
            4.将雪碧图设置为元素的背景图片
            5.设置一个偏移量以显示正确的图片
  雪碧图的特点：
            一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
 
雪碧图；
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             
 8             /* 默认第一个切图 */
 9             div{
10                 width: 41px;
11                 height: 69px;
12                 /* background-color: #bfa; */
13                 background-image: url(雪碧图按钮/icon-slides.png);
14                 background-position: 0 0;
15                 float: left;
16                 margin-left: 50px;
17             }
18             /* 第二个切图 */
19             .b{
20                 background-position: -41px 0;
21             }
22             
23             /* 第三个切图 */
24             .c{
25                 background-position: -83px 0;
26             }
27             /* 第四个切图*/
28             .d{
29                 background-position: -124px 0;
30             }
31             
32         </style>
33     </head>
34     <body>
35         <div class="a"></div>
36         <div class="b"></div>
37         <div class="c"></div>
38         <div class="d"></div>
39         
40     </body>
41 </html>

效果

 

 

在线的雪碧图CSS代码生成
http://tools.jb51.net/code/css_sprite

http://alloyteam.github.io/gopng/

 

 

 

 

 

posted @ 2020-04-10 22:10  全情海洋  阅读(359)  评论(0)  编辑  收藏  举报