css sprites

作者: 嘤嘤嘤998 | 来源:发表于2019-02-02 15:08 被阅读0次

CSS Sprites
CSS Sprites （精灵图）
css sprites精灵图、css图片整合、css贴图定位案例
CSS图片整合
前端性能优化--图片处理（Css Sprites 与 base6
CSS Sprites(CSS 精灵)
关于CSS Sprites
CSS Sprites 雪碧图
CSS Sprites
CSS：Sprites

CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位

eg:
 background: url("bg.png") no-repeat 0 -192px;

sprites优势:

减少http iis请求数,从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。
利用图片精灵还能减少图片的字节，你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可。
在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了。
如果想改变网站风格，你只需要处理一张图片就可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。

sprites缺点:

开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐。你需要考虑当前盒子会不会漏出其他的背景图，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。
在维护的时候比较麻烦，因为他是多张图在一张图上，牵一发而动全身的感觉。轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。

一般企业网站不是很推荐使用CSS Sprites
大网站大流量网站推荐使用，这样比较值得。

滑动门
三张背景图

image.png
效果

image.png
代码

 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <title>Document</title>
     <style type="text/css">
      html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img ,input, button {
           margin:0; 
           padding:0; 
       }
       ul {
           list-style: none;
       }
      div {
        width: 980px;
        height: 74px;
        margin: 0 auto;
        background: red;
      }
      .left {
        background: url(./c1.jpg) no-repeat;
        width: 22px;
        height: 74px;
        float: left;
      }
      .content {
        background: url(./c3.jpg) repeat-x;
        height: 74px;
        width: 938px;
        float: left;
      }
      .right {
        float: right;
        background: url(./c5.jpg) no-repeat;
        width: 20px;
        height: 74px;
      }
    </style>    
</head>
<body>
    <div>
        <ul>
            <li class="left"></li>
            <li class="content"></li>
            <li class="right"></li>
        </ul>
    </div>
</body>
</html>