3

似乎背景固定的 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
4

3 回答 3

3

事实证明，如果你在 Jelly Bean 浏览器中使用

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

或涉及bottom或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;
}
于 2012-11-01T21:41:21.623 回答
0

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

于 2012-09-23T13:50:02.673 回答
0

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

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

于 2013-05-14T07:35:45.010 回答