css Sprites精灵图怎么用?

css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。

css Sprites精灵图其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

css Sprites精灵图怎么用?

css精灵图(sprite)其实就是通过将多个图片融合到一张图片文件中,然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

优点:

减少网页http请求,加快页面加载速度,提高页面的性能(适合小图)

比如页面上使用到很多icon的图,如果页面一张张去请求这些图片的时后那http请求就会很多,这时候把这些图片合并为一张的话,页面就只需要加载一次了,减少了http请求带来的性能消耗;如下图:

1.png

图片整合原则:

1)边切图边整合。

2)定位时避免使用bottom,right等,用具体的数值,为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。

3)将小图标预留足够的空间,因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距,以至于其它的图片可能会意外出现在本区域内。一般的情况下,会将这些小图标整合到文件的最右侧。

4)单张整合好的sprite图片在100KB以内。

5)按分类整合图片。

6)为了方便计算尺寸,一般情况会将sprites图的坐标计算成整数倍。

实现代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sprite精灵图使用</title>
    <style type="text/css">
        ol, ul ,li{list-style:none};
        body, div,  ul, li {margin:0; padding:0;}
        ul li {
            float: left;
            background-color: #63caac;
            color: #fff;
            padding: 5px 10px;
            margin-right: 10px;
        }
        li:hover{background-color:#347764;}
        ul.sprite li span{display: block;}
        ul.sprite li span.l1{background-position:0 0;}
        ul.sprite li span.l2{background-position:-64px 0;}
        ul.sprite li span.l3{background-position:-128px 0;}
        ul.sprite li span.l4{background-position:-192px 0;}
ul.sprite li span{width:64px;padding-top:5px;height:64px;overflow:hidden;background:url(img.png) no-repeat;}
    </style>
 
</head>
<body>
    <ul>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>
</body>
</html>

更多web前端css知识,请查阅 HTML中文网 !!

以上就是css Sprites精灵图怎么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏