我正在为我姐姐的生日为一家假公司创建一个网站,我在固定背景方面遇到了一些麻烦。我知道它应该很简单,只是一个 attachment:fixed 的问题,但由于某种原因它似乎不起作用。嗯,原因显然是我,但我认为你可以帮助我 :)
这是网站:http://camilleperrin.fr/BBE/ ,当您必须滚动时会出现问题(如果您的分辨率为 1920x1080,则在此页面上: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>
如果您知道如何在保持模糊文本容器的同时解决此问题,那将非常有帮助。
谢谢!
卡米尔
最佳答案
问题是background-position的160px top offset引起的。我假设你这样做是为了防止背景干扰你的标题。但是,fixed
position 保持偏移量,因为它有点“卡在”视口(viewport)中。我建议从 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 */
}
编辑 - 另一种方法
如评论中所述,之前的方法可能不会跨越整个视口(viewport),因为 #overallcontainer
具有基于内容的动态高度,并且可能小于实际视口(viewport)高度,从而产生空白。
这可以通过将背景带回 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 */ }
关于html - 固定背景与顶部导航栏和滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35697828/