css sprite

时间 2019-11-17

标签 css sprite 栏目 CSS 繁體版

原文原文链接

1、相关知识讲解css

看过雅虎的前端优化35条建议，都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各类组件：图片，样式表，脚本，Flash等等。html

减小组件数必然可以减小页面提交的HTTP请求数。这是让页面更快的关键。减小页面组件数的一种方式是简化页面设计。但有没有一种方法能够在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。前端

这里咱们就拿雅虎的第一条建议：尽可能减小HTTP请求数里的减小图片请求数量进行讲解。服务器

咱们都知道，一个网站的一个页面可能有不少小图标，例如一些按钮、箭头等等。当加载html文档时，只要遇到有图片的，都会自动创建起HTTP请求下载，而后将图片下载到页面上，这些小图片可能也就是十几K大甚至1K都不到，假如咱们的一个页面有一百个小图标，咱们在加载页面时，就要发送100个HTTP请求，若是你的网站访问量很大并发量也很高，假如上百万访问量，那发起的请求就是千万级别了，服务器是有必定的压力的，而且一个用户的一个页面要发起那么多请求，是很耗时的。并发

因此，咱们优化的方案就是：将这些十几K、几K的小图标合并在一张图片里，而后用CSS的background-image和background-position属性来定位要显示的部分。前端优化

2、css sprites布局

css sprites直译过来就是CSS精灵。一般被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是经过将多个图片融合到一张图里面，而后经过CSS background背景定位技术技巧布局网页背景。这样作的好处也是显而易见的，由于图片多的话，会增长http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，若是能用css sprites下降图片数量，带来的将是速度的提高。性能

css sprites是什么通俗解释：CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片在布局盒子对象位置。优化

3、具体代码网站

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <style type="text/css">
            ul{padding: 0; margin: 0; border: red solid 1px; }
            ul li{list-style: none;  }
            ul li a{
                background: url(img/ico.png) no-repeat; 
                width:17px;padding-top:5px;height:15px; float:left; overflow:hidden;}
            ul li:nth-of-type(1) a{background-position: -62px -35px;}
            ul li:nth-of-type(2) a{background-position: -86px -35px;}
            /*背景background-position有两个数值，前一个表明靠左距离值，第二个数值表明靠上距离值*/
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a ></a>Word文章标题
            </li>
            <li>
                <a ></a>PPT文章标题
            </li>
        </ul>
    </body>
</html>

显示效果：

参考：http://www.divcss5.com/rumen/r767.shtml

1. css sprite
2. CSS Sprite
3. CSS sprite
4. CSS Sprite（CSS贴图）
5. css sprite合并
6. CSS sprite使用
7. CSS Sprite实例
8. Css Sprite Demo
9. CSS Sprite 图标
10. css sprite实例
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议