02-css精灵图实现及原理

精灵图原理：

                把网页中一些背景图片整合到一张图片文件中，再利用CSS的
                "background-image","background-repeat","background-position"
                的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

            优点:

                - 减少网页的http请求，从而加快了网页加载速度，提高用户体验。
                - 减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
                - 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
                - 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变

            缺点:

                - 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
                - CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
                - 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
                -精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图

            总结：

                - 当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了
                - 降低浏览器向服务器的请求次数，大大提高网页的加载速度。
 1 <!--
 2  * @Author: your TM_cc
 3  * @Date: 2021-11-14 12:58:15
 4  * @LastEditTime: 2021-11-14 13:59:34
 5  * @LastEditors: Please set LastEditors
 6  * @FilePath: \前端学习\CSS\02-css-sprite精灵图.html
 7 -->
 8 <!DOCTYPE html>
 9 <html lang="en">
10 <head>
11     <meta charset="UTF-8">
12     <meta http-equiv="X-UA-Compatible" content="IE=edge">
13     <meta name="viewport" content="width=device-width, initial-scale=1.0">
14     <title>精灵图</title>
15     <style>
16         div{
17             width: 300px;
18             height: 500px;
19             background-color: #aaa;
20             margin: 0 auto 0 auto;
21             background: url('./img/sprite.jpg') no-repeat 0 0/500% 300%;
22             /* 
23                 no-repeat 取消默认平铺
24                 0 0 - 坐标点，A的左上角开始、
25                 500% 300% - 根据图片大小缩放，因为是5x3的排列，所以 以 0% 0% 为缩放点，宽5倍、高3倍
26                 效果展示位 "A"
27 
28              */
29         }
30     </style>
31 </head>
32 <body>
33 
34     <div></div>
35 
36 </body>
37 </html>

 结果：

 

posted @ 2021-11-14 14:14  TM_cc  阅读(248)  评论(0)    收藏  举报