css雪碧图

Posted 2020-07-04

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

一个简单的例子：

一张图片作出一个按钮的三个状态  

一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active。

<a class="button" href="#">链接</a>

加入右侧的图片为：200px×65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。

a {

display:block; width:200px; height:65px; line-height:65px; /*定义状态*/

text-indent:-2015px; /*隐藏文字*/

background-image:url(button.png); /*定义背景图片*/

background-position:0 0; /*定义链接的普通状态，此时图像显示的是顶上的部分*/}

a:hover {background-position:0 -66px; /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/}

a:active {background-position:0 -132px; /*定义链接的普通状态，此时显示的是底部的部分，向下取负值*/}

初学的朋友可以试试效果。

而更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值，如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位。