CSS雪碧的那些事儿

CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

实现效果的实例：

div {
width: 25px;
height: 25px;
background-image: url(img/568dfdbdN4f7d7ca3.png);
overflow: hidden;
}

p {
width: 25px;
height: 25px;
background-image: url(img/568dfdbdN4f7d7ca3.png);
background-repeat: no-repeat;
background-position: 0px -25px;
overflow: hidden;
}
<body>
<div></div>
<p></p>
</body>

就是设置图片显示的高度，将超过部分的高度隐藏，还有设置图片的显示位置，来调整显示那个小的icon；

如何生成CSS雪碧图：http://spritegen.website-performance.org/

posted @ 2016-03-12 23:14 我的四片叶阅读(139) 评论(0) 收藏举报

刷新页面返回顶部