《
CSS Sprites技术》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331L2013.htm
3.CSS Sprites在维护的时候比较麻烦，sprites是普通双刃剑，如果页面背景有少许修改，个别就要改这张合并的图片，无需改的地方最好不要动，这样防止改动更多的css，如果在本来的处所放不下，有只能（最好）往下加图片，这样图片的字节就增添了，由于每次的图片改动都得往这个图片删除或增加内容，显得略微繁琐，而且从新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事件。当然，在性能的口号下，这些都是可以战胜的。
实例一：淘宝频道页面导航
后果图：
4,CSS Sprites图片合并技术减少请求优缺点.因为图片的位置需要固定为某个相对数值，这就失去了诸如center之类的机动性。
CSS Sprites总结
性能压倒所有。CSS Sprites十分值得学习和利用，特殊是页面有一堆ico（图标）。总之良多时候大家要衡量一下利弊，在决议是不是运用CSS ,css reset重置基础代码;Sprites。为坚持兼容性跟保护性，sprites图片中的各个局部保持必定的间隔是一种不错的做法。
CSS Sprites应用
sprites图：
CSS Sprites优点
sprites图：
2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其余工具丈量盘算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐,CSS position属性定位总结；不外网上已经有高手开发出“CSS Sprites 款式天生工具”，大家可以尝试一下。
效果图：
在这方面，淘宝网做的比拟好，我就以淘宝网为例吧。
Tag：技术 技巧
实例二：淘宝首页
CSS ,CSS opacity-实现图片半透明效果;Sprites为什么忽然跑火，跟可能晋升网站机能有关。不言而喻，这是它的宏大长处之一。
--> [
网站建设之]CSS Sprites技术
CSS Sprites简介
通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟,CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案，阿里巴巴各子公司的网页中到处都可发明css sprites 的影子。但CSS Sprites并不是什么清规戒律,CSS Hack和向后兼容的常见问题，但在许多情况下，它有着一定的上风，最主要的是它可以减轻服务器的负载，进步网页加载速度。跟着Web设计向着精巧、奇妙的方向发展，设计师们开端斟酌应用非Javascript的方 式制造鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。
说白了，CSS Sprites实在就是把网页中一些背景图片整合到一张图片文件中，再应用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能准确的定位出背景图片的地位,CSS hack区分不同浏览器的写法。
当页面加载时，不是加载每个独自图片，而是一次加载全部组合图片。这是一个了不起的改良，它大大减少了HTTP恳求的次数，减轻服务器压力，同时缩短了悬停加载图片所须要的时光延迟，使效果更流利，不会停顿。
2.个人以为CSS Sprites能减少图片的字节，我曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。
CSS Sprites毛病
1,CSS hack兼容性一览表.在图片合并的时候，你要把多张图片有序的公道的合并成一张图片，还要留好只够的空间，避免板块内不会呈现不用要的背景，否则可能会涌现出现烦扰图片的情形；这些还好，做苦楚的是在宽屏，高辨别率的屏幕下的自适应页面，你的图片假如不够宽，很轻易出现背景断裂；
诚然CSS Sprites是如斯的强盛，然而也存在一些不可疏忽的缺陷。
1,CSS Hack兼容各浏览器是否正常.利用CSS Sprites能很好地减少了网页的http要求,css hack 记录，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被普遍传布和应用的重要起因；
(责任编辑：网站建设)
CSS Sprites技术相关文章