CSS雪碧的那些事儿
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/
以上是关于CSS雪碧的那些事儿的主要内容，如果未能解决你的问题，请参考以下文章