Question

body {
    color:#999; 
    background-color:#000; 
    font-family:"Helvetica Neue", Helvetica, arial, sans-serif; 
    font-size:11px; 
    line-height:1.8em;
    background-image: url(../images/bck.jpg); 
    padding:0; 
    margin:0;
}

如何修改它以从网站的顶部到底部添加渐变背景图像？

Answer 1

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

根据您的需要进行编辑。

Answer 2

Mob对CSS3有一个很好的答案。但是，如果您想使用图像来支持旧浏览器，但希望它只在某个方向上重复，请使用repeat-x或repeat-y，如下所示：

background: #000 url('../images/bck.jpg') repeat-x;

如果您希望将规则分开，只需添加：

background-repeat:repeat-x;

遵守你的规则。您也可以根据需要使用“repeat-y”或“no-repeat”。如您所见，默认行为是repeat-all。如果您不担心遗留支持，Mob的答案是合适的，因为它不依赖于固定的图像大小，并且无论内容的高度如何，它都将始终跨越适当的距离。

如何从上到下添加背景渐变图像？

2 个答案: