经常看见别人的网站的背景图片是用一张大图,这个大图上几乎包含了网站的所有使用的背景图片。觉得比较感兴趣,就查了一下资料。原来是用css的background来实现的。
在css中可以用background来指定一个标签的背景图片。假设现在我们的标签是DIV.那么我该如何给DIV指定一个背景图片呢?
我们需要考虑两个问题,一个问题是DIV的宽度和高度,第二个问题是图片的宽度和高度。DIV的宽度和高度这个我们在写HTML的时候自己定义,图片的宽度高度,我们在做图片的时候确定。只需要用background属性将图片设置为DIV的背景就行了。
当 然,上面是针对DIV的大小和图片的大小一致的情况。现在的问题是图片的大小超过DIV的大小,那么我们该如何定位呢?图片在DIV内显示的坐标默认是左 上角对齐DIV的左上角,能否改变这个默认位置呢,如果能,那就好办了。在css中,我们将图片的左上角当作原点(0,0),向右则为负(跟一般的横坐标 相反),向下也为负(跟一般的纵坐标相反),单位为像素px。这样我们就可以对这个图片上的位置进行定位了。
知道了如何定位图片,那么一切就很好做了。最开始制作大图片的时候一般都会告诉每一个小图片的位置,你只需要依据这些信息进行定位就可以了。
.online_w_c {
background:url(online_bg.png) repeat-y 0 -185px;
}
知道了图片的定位规则,就能很轻松的理解为什么是-185px了,而不是185px.
用这种一张大图片的好处就是能够减少浏览器请求文件的次数,加快页面的传输。但不足就是如果要修改图片,将会很麻烦。