所以我得到了一个带有 CSS 渐变背景的主体。然后我有一个绝对定位的 div 嵌套在其中，并带有背景覆盖。反过来，内容包装器 div 然后嵌套在其中。我希望固定背景 div，并让网页滚动到顶部。问题是，当页面滚动时，背景覆盖 div 会像卷帘一样消失......
这是我用来演示问题的 fiddle ... http://jsfiddle.net/WPk6h/ (尝试滚动结果 Pane 以查看我的意思)。
HTML....
<body>
<div id="bgwrapper">
<div id="wrapper">
Content...
</div>
</div>
</body>
和 CSS...
body {
background-color:#fcf
}
#bgwrapper{
position:absolute;
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
#wrapper {
width:300px;
margin: 0 auto;
}
有什么想法可以防止这种情况发生，以便背景覆盖始终可见吗？
请注意...我还没有在所有浏览器中对其进行大量测试 - 问题出在我使用的第一个浏览器 Chrome 中，所以我还没有抽出时间在其他浏览器中进行测试。
编辑...
人们想知道为什么我不直接将背景图像应用到 HTML 或 BODY 标签 - 好吧，CSS 渐变和背景图像之间存在冲突 - 你不能将它们都放在同一个元素中，如图所示与下面的两个例子。这就是为什么我使用额外的背景包装 div 来创建 5% alpha 图像覆盖渐变 bg 的效果。
http://jsfiddle.net/tqbtm/ (尝试将渐变 和 bg 图像添加到 body 标签)
http://jsfiddle.net/ca5wa/ (将 bg 图像添加到 bg wrapper div over body gradient)
最佳答案
您需要从 #bgwrapper div 中删除 position: absolute:
#bgwrapper{
width:100%;
height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
关于css - 防止背景消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16650682/