logo标签列表

在 Android 上添加动态内容后，背景图像会变为纯色。

androidcss
3

我想要在网站内容后面拥有一张完整的背景图片。我正在使用以下CSS来实现这个目标:

body {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我的问题是，尽管在桌面上运行得很完美： 网页背景图片 并且最初在移动设备上也能正常工作：

移动设备上的工作状态

但一旦JS插入了新内容：
posts.innerHTML = newHTML + posts.innerHTML;

无论显示什么图像（我尝试过多个图像），都会出现基于图像的固定颜色：Solid colour instead。当您滚动页面时，底部将出现一个白色边框（当您停止滚动时，它将填充颜色）。如何解决这些问题？如果您想查看所有代码，请访问 GitHub：https://github.com/NickGeek/Campfyre。
这看起来很奇怪...但问题肯定是与cover或fixed背景属性有关...它将背景缩放到窗口的大小..你可以尝试在body CSS中添加width: 100%; height: 100%;吗？ - Qarib Haider
@SyedQarib 我尝试添加 width: 100%; 和 height: 100%;，但没有改变任何东西。如果我删除 fixed，则桌面上的背景将停止工作。 - NStorm
只是想知道，如果您删除高度为100％的body元素，它的高度是多少？它比内容短吗？ - Salman A
没有任何内容被添加到<body>之前的DOM中。 - NStorm
将此样式应用于HTML选择器是否正确？html {background:.... - Banzay
显示剩余2条评论
2个回答
3

我通过使用以下CSS解决了这个问题：

html, body {
    height: 100%;
}
html {
    overflow-y: hidden;
}
body {
    overflow-y: scroll;
    background-color:#000000;
    background: url(../img/bg.jpg) no-repeat center center;
    background-size: 100% 100%;
}

这使我可以使用完整大小的图像而不必使用会在安卓上出现问题的fixed属性，也不用使用无论放在哪个元素上都会出问题的cover属性。此外，我还需要在body上加上background-color: transparent;。

0

看起来正文高度被设置为视口高度。无法进一步增加，并且不继承整个页面的真实高度。因此解决方案是添加一个包含DOM的辅助div：

所以改为：

<body>
 ...code
</body>

到

<body><div class="scrollme-not-body">
 ...code
</div></body>

尝试使用
html {

    background: url(http://campfyre.org/img/bg.jpg) no-repeat center center fixed;

    background-size: cover

}
似乎覆盖和固定是问题，即使在HTML或另一个div上也会出现问题。 - NStorm
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接