Question

似乎背景修复的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

Answer 1

事实证明，如果你使用

，在Jelly Bean浏览器中

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

对于bottom，{p>或涉及right或background-position的任何内容，您参考屏幕右下边缘的任何元素都将被背景图片覆盖。

这肯定是Jelly Bean浏览器中的一个错误。

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

HTML：

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

CSS：

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

Answer 2

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

Answer 3

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

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

背景附件搞砸了Jelly Bean WebView中的渲染？

3 个答案: