固定背景与顶部导航栏和滚动

Question

我正在为我姐姐的生日为一家假公司创建一个网站，我在固定背景方面遇到了一些麻烦。我知道它应该很简单，只是 attachment:fixed 的问题，但由于某种原因它似乎不起作用。嗯，原因显然是我，但我认为你可以帮助我:)

这是网站：http://camilleperrin.fr/BBE/, and the problem appears when you have to scroll (on this page if you have a 1920x1080 resolution: http://camilleperrin.fr/BBE/index.php?page=careers)。如果您有一个巨大的屏幕并且看不到问题，背景图像不会停留在应有的位置，并且会随着滚动而下降。

这是我的代码（我是在网上帮忙的，不是我自己想出来的）：

CSS :

    body{
        background:url('background.jpg') no-repeat center 160px fixed;
    }

    #overallcontainer{
        padding: 70px 90px 120px 90px;
    }

    #blurcontainer {
        position: relative;
    }

    #blurbg{
        background:url('background.jpg') no-repeat center 160px fixed;
        text-align:center;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 99;  
        width:800px;
        margin:0 auto;
        padding:60px;

      -webkit-filter: blur(5px);
    }

    #textContainer  {
        position: relative;     
        z-index: 100;
        background: rgba(0,0,0,0.65);
        margin:0 auto;
        color:#dde;
        width:800px;
        padding:60px;
        text-align:justify;
    }

HTML :

<div id="overallcontainer">
    <div id="blurcontainer">
        <div id="blurbg"></div>
        <div id="textContainer">
            blah blah blah
        </div>
    </div>
</div>

如果您知道如何在保持模糊文本容器的同时解决此问题，那将非常有帮助。

谢谢！

卡米尔

Answer 1

问题是由background-position的160px顶部偏移引起的。我假设您这样做是为了防止背景干扰您的 header。但是，fixed 位置保持偏移量，因为它在视口中有点像 "stuck"。我建议从 body 中删除背景并将其直接应用于您的主要内容容器 #overallcontainer 以解决此问题：

#overallcontainer {
    padding: 70px 90px 120px 90px;
    background: url('../design/careers.jpg') no-repeat top center fixed;
    background-size: cover; /* makes sure image covers entire viewport */
}

编辑 - 另一种方法

正如评论中所讨论的那样，之前的方法可能不会跨越整个视口，因为 #overallcontainer 具有基于内容的动态高度并且可能小于实际视口高度，从而产生空白。

这可以通过将背景恢复为 body 然后创建一个特殊的 header 元素来缓解，该元素通过向 [=38= 添加纯白色背景来隐藏 body 背景].

改变

<img src="design/header.jpg">

到

<header><img src="design/header.jpg"></header>

CSS

body { 
   ...
    background: url('../design/company.jpg') no-repeat top center fixed;
    background-size: cover;
}

header {background:#FFF;}

#overallcontainer { /* no need for any styles to this div any more */ }

固定背景与顶部导航栏和滚动

Fixed background with top navbar and scrolling

html

css

scroll

fixed

background-attachment

编辑 - 另一种方法