WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

什么是CSS Sprite技术

更新时间:2012-02-14 18:59 作者:建站学点击:

CSS Sprite是一种利用CSS特性对网页中图片进行的特殊处理的运用方式,主要是将多张零星图片综合到一张图片中。这样做的好处是可以减少用户浏览网页时对服务器的请求数,减少服务器负载,达到优化网站的目的。目前多内外著名网站都在使用这种技术。

 

 CSS Sprite是如何在一张图片中集合多张零星图片的呢?请看图一、图二、图三,它们分别是google、土豆网和搜狗网中用到CSS Sprite技术的背景图片。

它们利用有限的图片空间将多张小图片结合于其中,然后使用CSS背景定位技术将固定宽度和高度的图片作为背景显示出来。

CSS Sprite有三个简单的应用:

1.减少图片限制——就是将多个相似图片综合在一张图片里,CSS Sprite的主要做用,以尽量减少图片数量为前提。

2.单图滚动——即在一张图片中把多种状态合并,然后再使用CSS定位背景图技术模拟动态效果。就像图二中的上下箭头一样,在默认状态下使用背景图的下箭头部分,鼠标悬浮或点击后使用背景图中的上箭头部分。

3.延长背景——如果页面中存在平铺背景图的效果,并且带有边角,可以在一张图片中结合平铺的背景和边角,再利用CSS背景定位实现,例如图二中最顶部的背景条。

CSS Sprite技术必须在实战中才能总结和体会,所以只要经常勤于动手就可以很快提高自己的CSS Sprite技术。

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容