为什么正文背景图片会覆盖 HTML 标签背景？答案

【问题标题】：Why is the body background image covering the HTML tag background?为什么正文背景图片会覆盖 HTML 标签背景？
【发布时间】：2011-05-15 22:35:10
【问题描述】：

我有两张图片，一张附加到 HTML(background) 标记，位于底部、左侧并重复 X。我在body标签上附加了另一个背景图片，它位于左上角，也重复X。

我注意到 Body 覆盖了 html 图像。我不确定这是否可行，我已尝试搜索但没有解决方案。

有没有办法让body图片停留在html图片下面？

这样html（附加到背景的图像）就在body（背景）图像之上？

html {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(../graphics/main-background-image-x.png);
}

body {
    background-repeat: repeat-x;
    background-position: left top;
    background-image: url(../graphics/sub-background-image-x.png);
}

【问题讨论】：

^ 他说的。您可以使用jsfiddle.net 发布示例代码，以便人们可以看到您的问题。针对您的问题，您能不能不只是交换图像...？
添加了代码，我没有添加代码，因为它像箭头一样直。 :) 无论如何，交换代码并没有帮助，因为这个想法是让图像平铺覆盖整个浏览器窗口。由于某种原因，当您最小化窗口时，身体图像停止重复通过初始窗口大小。将图像放在 html 上，使其能够覆盖窗口，无论调整大小。

标签： css

【解决方案1】：

网站here 通过将height: 100%; 添加到body 和html 标签来实现我相信您正在寻找的东西。

html{
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(../graphics/main-background-image-x.png);
    height: 100%;
}

body{
    background-repeat: repeat-x;
    background-position: left top;
    background-image: url(../graphics/sub-background-image-x.png);
    height: 100%;
}

【讨论】：

太棒了！添加 html,body{ height: 100%;} ，在我的网站上解决了这个问题 thx :D

【解决方案2】：

听起来你只是想要：

html
{
    background:Transparent url(../graphics/sub-background-image-x.png) repeat-x left top;
    margin-bottom:1px;
}

body
{
    background:Transparent url(../graphics/main-background-image-x.png) repeat-x left bottom;
    margin-bottom:1px;
}

【讨论】：

【解决方案3】：

试试这个：

html {
    background: url(../graphics/main-background-image-x.png) repeat-x left bottom transparent;
}

body {
    background: url(../graphics/sub-background-image-x.png) repeat-x left top transparent;
}

【讨论】：