我正在为我姐姐的生日为一家假公司创建一个网站,我在固定背景方面遇到了一点麻烦。我知道它应该很简单,只是一个附件:固定的问题,但由于某种原因它似乎不起作用。好吧,原因显然是我,但我认为你可以帮我解决这个问题:)
这是网站: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>
如果您知道如何在保持模糊文本容器的同时解决此问题,那将非常有帮助。
谢谢!
卡米尔
该问题是由背景位置的 160px 顶部偏移引起的。我假设您这样做是为了防止背景干扰您的标题。但是,fixed
位置会保留偏移,因为它有点"卡"在视口中。我建议从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
,然后创建一个特殊的标题元素来缓解这种情况,该元素通过向标题添加纯白色背景来隐藏正文背景。
改变
<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 */ }