一张完整的图片,如何在里面获取你需要的一小张呢?CSS Sprites技术可以帮你解决.
优点
跟能够提升网站性能有关。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。
由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
也有可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
下面我们来看例子吧。
.max {
width:16px;
height:16px;
background-image:url(
http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png
);
background-repeat: no-repeat; /*我们并不想让它平铺 **/
text-indent:-999em; /*隐藏文本的一种方法 **/
background-position: 0 -350px; /* 不写的话。默认是0 0px **/
}
.min {
width:16px;
height:16px;
background-image:url(
http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png
);
background-repeat: no-repeat; /*我们并不想让它平铺 **/
text-indent:-999em; /*隐藏文本的一种方法 **/
background-position: 0 -400px;
}
.comasp{
width:30px;
height:20px;
background-image:url(
http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png
);
background-repeat: no-repeat; /*我们并不想让它平铺 **/
text-indent:-999em; /*隐藏文本的一种方法 **/
background-position: 0 -300px;
}
最大化
最小化
自定义
连接:最新发布的YUI中,也是使用到CSS Sprites,几乎都有的CSS装饰图都被一个
40×2000的图
包办。社交大站Facebook最近也使用了一个
22×1150的图片
承担了所有icon.一时间,CSS Sprites无处不在。
分享到:
相关推荐
原来这个叫CSS Sprites技术,主要是个人爱好啦,我对前台这些个东西比较感兴趣,所以会去了解多一点。 废话不多说,直接上我做的小例子: 这是一张多个小背景的图片合并而成的图片,当我们想要在页面上只显示其中...
CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传,后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间...
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位...
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊。
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,也就是CSS Sprites(图片合并)技术。
CSS Sprites就是可以将许多图片集成在一张大图上,然后利用CSS的图片定位技术将其分割开来。这款CSS3图片效果就是可以将分割完的小图片实现分组的动画效果,我们只需要点击按钮即可切换到相应的分组状态,并伴随动画...
css sprites图片背景优化技术 ,多个背景在一张图上,提高网站访问效率,减少连接数。
利用CSS Sprites实现切图技术.docx
CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是...
CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。
CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种制作方法流传,后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员...
美国YAHOO在页面制作中所用到的图片整合技术,首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位,感兴趣的朋友可以了解下具体的实现方法
使用CSS Sprites技术画圆角,简单的讲就是把一个圆做在一张图上,定义4个div,每个div取图的一个角做背景,下面看具体实现方法。
论坛上提到这样的问题:“css中用一张背景图做页面的技术有什么优势?”简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。 CSS Sprites 的目的就是...
CSS_Sprites(CSS图像拼合技术)教程、工具集合.doc )