什么是CSS Sprite技术


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

 

 

 

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

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

CSS Sprite有三个简单的应用:

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

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

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

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



相关阅读:
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
php摘要生成函数(无乱码)
JavaScript入门教程(10):认识其他对象
php 正则表达式小结
实用的CSS常见的问题和技巧总结
FreeBSD下构建安全的Web服务器
用javascript作一个通用向导说明
OLTP数据转换到OLAP数据仓库
解决Oracle启动但不能登录的问题
WordPress的JavaScript 本地化实现
SQL Server 2000 与Internet-支持Web 应用的新特性
modernizr:检测浏览器对HTML5和CSS3特性
模仿163网盘用AJAX实现无刷新文件上传的实例
PHP制作下拉透明菜单
快速导航

Copyright © 2016 phpStudy |