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;
}
本人博客的文章大部分来自网络转载,因为时间的关系,没有写明转载出处和作者。所以在些郑重的说明:文章只限交流,版权归作者。谢谢