css从有多个图片的背景图片上取出某一个图片

我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片，

  这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。

1.首先在要调用小图片的地方要加上大的背景图片。

2.然后根据像素位置写上要取用的图片。（注意。。因为像素是从右小角取的。所以应该是负数）

示例代码：

 

.txt4left3,.txt4left5 {
background : url(../Image/In_frame.gif) no-repeat transparent ;
}

.txt4left3 {
width : 710px ;
height : 45px ;
background-position : 0px -152px ;
}

 

 

 

转载于:https://www.cnblogs.com/wzg0319/archive/2010/05/28/1746497.html