Question

我有两个图像，一个附加到HTML（背景）标签，位于底部，左侧和重复X. 我有另一个背景图像贴在身体标签上，位于左上角，也重复X.

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

有没有办法让身体形象保持在html图像下？

这样，html（附加到背景的图像）位于正文（背景）图像的顶部？

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

Answer 1

网站here通过向正文和html标记添加height: 100%;来实现我认为您正在寻找的内容。

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

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

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

为什么身体背景图片覆盖HTML标签背景？

3 个答案: