CSS Sprites技术

核心提示：随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。

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图：

　　实例二：淘宝首页



　　效果图：

1 2 下一页 >全文阅读
提示：试试"← →"键，翻页更方便哦！

[1] [2]  下一页

时间： 2024-03-04 14:31:05

CSS Sprites技术的相关文章

CSS Sprites技术及图片优化

关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量.这并且不是单方面能做到的,一切取决于XHTML.CSS.CSS Sprites图片之间的配合.现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:<一张背景实现自适应九宫格>,以下总结了图片切割术与图象优化的一些方法. 图片优化 对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果,而且能为你节省10%-30%的文件体积. Photoshop相比起Fireworks

谈谈CSS Sprites技术及其优化

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大家还在拨号上网的"远古时期",由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图.随着网络技术的发展,网速的提升,大家越来越重视页面的加载速度,页面效率问题,过去的那些小图便成为了前端开发者的眼中钉,因为每加载一张图片都会产生一次浏

CSS Sprites+CSS3 Icon Font

      CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问 该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位.       CSS Sprites加速的关键,不是降低质量,而是减少个数.       做成Sprites的很大的原因是图片流量大,想象一下,如果将一些小图片做成字体模式进行显示,会不会很神奇呢?随着CSS3对字体样式的不断丰富,

css sprite技术解析

  说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到,说这个技术可以减少网站图片请求次数,当时还不是很理解,之后了解了一番,明白了其中的原理,故在此给大家分享一下.    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以

如何使用CSS sprites减少HTTP请求

CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image.background-position显示图片特定部分达到和分散的一张张小图片一样的效果   sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过backgro

网页提速之：利用css sprites减少图片请求

在高举"用户体验"为中心的网络时代,你是否因为打开网页速度太慢而关闭网页呢?相信很多人的答案都是肯定的.在高速的网络时代,千万不要挑战广东网民的耐心,不然只会导致网民远离你的网站而去. 网页提速有很多的方法,其中一条就是减少http请求.每一个网站都会用到图片,当一个网站有10张单独的图片,就意味着在浏览网站时会向服务器提出10次http请求来加载图片.下面为大家介绍减少图片请求的方法. css sprites:网站前端开发者大多称之为"css精灵",通俗的理解就是

CSS高级技巧:CSS Sprites

上一篇CSS教程文章:CSS高级技巧:圆角矩形 网页教学网 CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧. 网页教学网 CSS Sprites最适合用来做的, 恩, 比如: 清单导航的CSS鼠标翻转效果 大量小图标集中的应用 (FckEditor) ...很多很多,多的想不出来了. 实现原理简单地说就是控制容器的大小, 然后利用background-repeat, backgrou

CSS开发框架技术OOCSS编写和管理CSS的方法

文章简介:今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM.这些方法试图对CSS采用面向对象的编程原则.尽管样式语言和面向对象的软件设计原则在概念之间存在一定的问题,这些微妙的东西对于一个欠缺经验的开发人员来说可能不会立即显现出来.最令人不 公认的拥有一个编写和管理CSS的方法比什么都要更好.尽管如此,一些开发人员的实践是不利于语义化质量和长期的可维护性.我们要讨论一些被提倡的"CSS框架方法"的问题和作为Web开发人员,我们如何可以更好的解决这些问题

CSS Sprites如何使用重复背景日期

  之前在用到CSS Sprites的时候常常会遇到一个问题,如果遇到需要重复填充背景的情况该如何解决? 一般解决方法是:如果是横向,把图片设置为通栏的,便可以repeat-x.纵向的采取不重复方法,取一个"足够长的高度".但是这样也会带来一个问题,不利于控制背景图片的大小及尺寸,和图片的易维护性.后来还是老老实实的把需要平铺的图单独放出来. 不知道还有没有更理想的解决方法.