Question

所以我的身体有一个CSS渐变背景。然后我有一个绝对定位的div嵌套在那个背景覆盖。反过来，内容包装器div然后嵌套在其中。我希望修复背景div，并在网页上滚动顶部。问题是，当页面滚动背景叠加时，div会像卷帘一样消失......

这是我演示问题的小提琴...... http://jsfiddle.net/WPk6h/（尝试滚动结果窗格以查看我的意思）。

... 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来创建覆盖渐变bg的5％alpha图像的效果。

http://jsfiddle.net/tqbtm/（尝试将渐变和 bg图片添加到body标签中）

http://jsfiddle.net/ca5wa/（将bg图像添加到bg包装器div over 主体渐变）

Answer 1

您需要从position: absolute div：

中删除#bgwrapper

#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;    
}

Update jsfiddle

Answer 2

您还可以查看以下链接：

http://css-tricks.com/perfect-full-page-background-image/

详细介绍了完成全屏，固定背景的几种不同方法

我目前使用的方法是这种技术的方法1（CSS3）

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

Answer 3

正如Doug所说，只需将background-attachment:fixed; background-size:cover; width:100%; height:100%;添加到#bgwrapper样式中。

Answer 4

将位置设置为固定

position:fixed

在......

#bgwrapper{
 position:fixed
 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;    
}

防止背景消失

4 个答案: