项目中遇到一个关于使用图片作背景的问题。
在我的电脑中查看时,一切显示的是正常的,但是到了同事那边,因为他的显示器比我的大,所以在他那里就是页面的一大部分是我定义的背景图片,页底的一小部分是白色的。
我之前定义的class是:
body {
background: url("../images/line.jpg") repeat-x;
}
后来定义为
body {
background: url("../images/line.jpg") repeat-x scroll 0 0 #0096C2;
}
- 前一个class没有定义#0096C2;只是定义了repeat-x,在x方向上重复。
- 图片line.jpg的高度是275px,也就是说页面的背景图片只有275的高度,一旦高度高于275px,那多出来的部分就显示的是浏览器默认的body的颜色。
- 后一个class添加了#0096C2;这个颜色值取的是图片最低端的颜色,这样页面多出来的那部分就会显示这个颜色值(我使用的图片是渐变的)
- 因为使用的图片是渐变色的,不要使用repeat-y。