CSS Sprites简介以及优缺点
发布时间：2009-10-20 14:55:42 作者：佚名 
我要评论
我要评论阿里妈妈UED谈CSS Sprites技术.
CSS Sprites简介
通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。
说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
CSS Sprites应用
在这方面，淘宝网做的比较好，我就以淘宝网为例吧。
实例一：淘宝频道页面导航
效果图：
点击放大
sprites图：
相关文章
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
这篇文章主要介绍了通过CSS3的object-fit来调整图片适配尺寸的技巧,包括用object-fit来居中并裁剪图片的方法,需要的朋友可以参考下2016-02-27- 这篇文章主要介绍了CSS计数器counter()的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-09-26
- 这篇文章主要介绍了CSS中的伪元素,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-01
- 这篇文章主要介绍了CSS中的各种选择符,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-17
- 这篇文章主要介绍了Markdown.css样式,用来实现显示强大的Markdown样式的文本,需要的朋友可以参考下2015-07-16
- CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局2014-05-03
定义css设备类型-Media Queries图表简介及使用方法
CSS3完美地解决了让同一个网站同时适应完全不同尺寸的屏幕这些问题;css3提出的MediaQueries解决了为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式2013-01-21css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08- 本文主要介绍了通用的css hack2012-07-11
- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢?下面让我2012-05-31
最新评论