背景附件在 Jelly Bean WebView 中打乱了渲染？答案

【问题标题】：background-attachment messes up rendering in Jelly Bean WebView?背景附件在 Jelly Bean WebView 中打乱了渲染？
【发布时间】：2012-09-12 15:04:24
【问题描述】：

背景固定的 CSS 属性似乎在 Jelly Bean WebView 中无法正常工作（无论是在应用程序中还是使用默认的 Android 浏览器）。

如果我设置了这个属性，背景图片会被加载到内容上，即内容在背景图片的后面。

这是我的相关 HTML 代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
    <a href="keypress://1"><img src="./gesture-background_files/one.png"></a><br />
    Film24<br />                    
</div>
<div id="right-keys-vertical">
    <a href="keypress://1"><img src="./gesture-background_files/one.png"></a><br />
    Film24<br />
</div>
<div id="footer">
    MUSCADE<span class="large">EPG</span>
</div>   
</body>
</html>

这是 CSS 的相关部分：

body {
    background-image: url(hot-black-background.jpg);
    background-color: black;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom left;
}

#right-keys, #right-keys-vertical {
    position: absolute;
    right: 10px;
    width: 100px;

    text-align: center;
    text-shadow: black 2px 2px 0px;
}

#right-keys img, #right-keys-vertical img {
    height: 90px;
    margin-bottom: 0;
}

#footer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 20px;
}

有点长，但唯一重要的部分是 CSS 文件顶部的 background-attachment 和 background-position 属性。如果我删除这些，一切正常。

这是一个已知的错误吗？任何人都可以提出解决方法吗？

这是文件的链接，您可以尝试从 Jelly Bean 原生浏览器（不是 Chrome）打开它：

http://212.92.197.78/gesture/gesture-background.htm

【问题讨论】：

提醒我this question。

标签： android css android-webview android-4.2-jelly-bean

【解决方案1】：

原来在果冻豆浏览器中如果使用

body {
   background-image: url(any-image.jpg);
   background-attachment: fixed;
   background-position: bottom;
}

或任何涉及bottom 或right 的background-position，您参考屏幕右侧或底部边缘定位的任何元素都将被背景图像覆盖。

这肯定是果冻豆浏览器中的一个错误。

我没有使用上述方法，而是使用以下代码在我的页面上放置了背景图片：

HTML：

<body>
   <img id="background" src="any-image.jpg" />
   (...)
</body>

CSS：

#background {
   z-index: -1;
   position: fixed;
   bottom: 0;
   left: 0;
}

【讨论】：

【解决方案2】：

对于位置相关和绝对位置，您可以使用 z-index。阅读有关 z-index 的更多信息：http://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：

【解决方案3】：

在我的网站上，为了使背景图像重新出现在内容后面（在 Jelly Bean 浏览器上），我只需要删除 css 属性：background-attachment:fixed。

Zoltan 的解决方案对我来说效果不佳，因为它使背景图像在某些浏览器中无法正确显示（在 browserstack 上测试）

【讨论】：

我的问题是我想将背景固定在屏幕的左下角。如果只删除background-attachment: fixed，将无法定位背景图片。