body用渐变图片作背景

项目中遇到一个关于使用图片作背景的问题。

在我的电脑中查看时,一切显示的是正常的,但是到了同事那边,因为他的显示器比我的大,所以在他那里就是页面的一大部分是我定义的背景图片,页底的一小部分是白色的。

我之前定义的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。
原文地址:https://www.cnblogs.com/linsx/p/2818153.html