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

发布于 2024-12-06 10:41:49 字数 298 浏览 1 评论 0原文

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;
}

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

原文

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;
}

How can i modify it to add a gradient background image from the top to bottom of the site?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺深海 2024-12-13 10:41:49

/* 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%);

编辑它，因为它适合您。

/* 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%);

Edit it as it suits you.

回复收藏 0 原文

青朷 2024-12-13 10:41:49

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

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

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

background-repeat:repeat-x;

按照你的规则。您还可以根据需要使用“repeat-y”或“no-repeat”。正如您已经看到的，默认行为是全部重复。如果您不担心遗留支持，Mob 的答案是一个很好的选择，因为它不依赖于固定的图像大小，并且无论内容的高度如何，它总是跨越适当的距离。

Mob has a good answer for CSS3. However, if you want to use an image to support older browsers, but want it to repeat in only a certain direction, just use repeat-x or repeat-y, as follows:

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

If you'd rather keep your rules separate, just add:

background-repeat:repeat-x;

to your rules. You can also use 'repeat-y' or 'no-repeat', depending upon your needs. As you saw already, the default behavior is to repeat-all. If you are not worried about legacy support, Mob's answer is a good fit, as it doesn't rely on a fixed image size, and it will always span the proper distance, regardless of the height of your content.

回复收藏 0 原文

~没有更多了~