3

所以我有一个带有 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上的主体渐变）

4

4 回答 4

2

您需要position: absolute从#bgwrapperdiv 中删除：

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

更新 jsfiddle

于 2013-05-20T13:34:37.217 回答
1

您还可以查看以下链接：

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;
}
于 2013-05-20T13:55:10.247 回答
1

正如 Doug 告诉您的，只需添加background-attachment:fixed; background-size:cover; width:100%; height:100%;到您的#bgwrapper 样式中即可。

于 2013-05-20T14:09:30.423 回答
0

设置要固定的位置

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;    
}
于 2013-05-20T13:41:03.500 回答