【问题标题】：CSS Best Approach for 2 backgrounds?2个背景的CSS最佳方法？
【发布时间】：2011-08-23 22:06:20
【问题描述】：

我的设计在背景的前 25% 处有一些图像，然后它只是一个简单的渐变，我可以在其余部分重复。

将图像放在顶部，然后用渐变填充页面的其余部分的最佳方法是什么？

我采用了这种方法：

html{
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
}

body {
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

但是在代码的一种实现中，没有出现 HTML 的背景图像？

有什么帮助吗？

【问题讨论】：

那是错误的，您可以在 HTML 元素上有背景。但是，使用背景图像为其添加上边距会导致旧版 safari 和 IE8 中的错误。

标签： html css background-image

【解决方案1】：

与之前所说的相反，您可以拥有html的背景。

你的方法差不多了，试试height: 100%和min-height: 100%。

http://jsbin.com/omikuy

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
    height: 100%;
}
body {
    min-height: 100%;
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

【讨论】：

【解决方案2】：

跨浏览器，但不是语义

最跨浏览器的解决方案是为网站中的所有内容添加一个包装器<div>，然后为其应用一个背景，并为正文应用一个背景。

更少的跨浏览器，但更多的语义

您也可以尝试使用伪元素来应用一个背景：

body:after { background: .... }

最少跨浏览器，但最语义化

最先进的方式是在 CSS3 中使用多个背景

body { background: url(...) top center, url(...) top center repeat-y }

【讨论】：

【解决方案3】：

做到这一点的最佳方法是让主体作为渐变背景，并为具有以下类的图像创建一个 div：

.div_bg {

position:absolute;
width:100%;
height:100px; (or whatever)
top:0px;
background-image:whatever; 
repeat:repeat-x;

}

并确保 HTMl 有这个（以消除顶部的空白）：

html {
margin: 0 auto;
}

【讨论】：