用css sprites（图像拼合技术）优化css加快网站速度[转]

一般说来客户端对服务器端进行一次请求就要消耗0.2s左右。如果一个网站的图片，特别是网页素材较多的情况下，于服务器之间的延迟就很大。利用CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数。多个图片将以一定间距合并为一个大图片文件。页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置。
例子：

这两个class都使用同一个图片：

.min, 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 0，可以看下 sprite.png , 处于这个位置正是灰块。好了，我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于 Y轴400px处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：

.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}

就是这么简单，不过相信最麻烦的就是定位像素的问题，没事推荐个网站Web performance.这个能很轻松的帮你合成一张图片并帮你定位background-position的值。

转载于:https://www.cnblogs.com/sharmy/archive/2009/02/23/1396537.html

用css sprites（图像拼合技术）优化css加快网站速度[转]相关推荐

css sprites原理,CSS Sprites (CSS图像拼合技术)教程工具
一篇教程,其源文件可下载学习 Fast Rollovers Without Preload 一个快速翻转效果的例子 CSS Sprites + Rounded corners 另一个例子:使用CSS ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
CSS Sprites图片拼合生成器实现思路
在对WEB前端做性能优化时,为了有效减少http请求数,通常会把Web用到的图片合并成一张大图,采用CSS的background-position 属性,控制页面的图片显示. 问题是,目前虽然有这么一 ...
win7计算机怎么优化驱动器,Win7优化电脑加快关机速度的方法技巧
原标题:Win7优化电脑加快关机速度的方法技巧在使用Win7系统的过程中,很多用户都遇到过关机速度慢的问题,怎么办呢?电脑的关机速度慢和开机速度慢其实是一个道理,一般是由于磁盘.电源等问题造成的.这 ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
Window 10优化：加快PC速度的13种方法
1. 更改电源设置如果您使用Windows 10的"省电"计划,则会降低PC的速度.该计划会降低PC的性能以节省能源.(甚至台式计算机通常都有"省电"计划. ...
加快网站速度的最佳做法_(4)避免使用css表达式
CSS表达式是一个强大的方法,可以使得CSS属性动态的改变.在IE5.0的版后得到支持,但是在IE8中被剔除了.作为一个例子,背景色可以用CSS表达式设置成每隔一个小时改变. /*code里面没有cs ...
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图一.什么 ...
css图片精灵定位_DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图一.什么 ...

用css sprites（图像拼合技术）优化css加快网站速度[转]

用css sprites（图像拼合技术）优化css加快网站速度[转]相关推荐

最新文章

热门文章