CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合併技术,该方法是将小图示和背景图像合併到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
基本介绍
- 中文名CSS雪碧
- 外文名css sprite
- 别称CSS精灵
- 实质一种CSS图像合併技术
原理
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; /定义连结的普通状态,此时图像显示的是顶上的部分
上一篇:CSF(档案格式)
下一篇:ISO9001体系认证