我正在尝试制作这样的页面
标头应该固定,bg-image
也应该固定,我做到了。我唯一的问题是,如何使完全相同的模糊。我究竟做错了什么?
这是我的代码
<body>
<div class="main">
<div class="bg-image">
<div class="header"></div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!</p>
</div>
</div>
</body>
这是SASS
@mixin background($imgpath,$position:0 0,$repeat: no-repeat)
background:
image: url($imgpath)
position: $position
repeat: $repeat
html, body
height: 100%
width: 100%
padding: 0
margin: 0
.bg-image
@include background('http://imgur.com/sTO5GYX')
background-size: cover
background-attachment: fixed
display: block
height: 500px
width: 100%
z-index: 1
.header
@include background('http://imgur.com/sTO5GYX')
position: fixed
top: 0
left: 0
z-index: 2
background: rgba(153, 184, 208, 0.3)
height: 50px
display: block
width: 100%
filter: blur(2px)
.content
height: 1500px
display: block
width: 100%
text-align: center
最佳答案
层数:
1-常规背景图片;
1.5-纯色层,避免在面对白色背景时出现模糊的边框;
2-模糊克隆(降低高度);
3-白色层,不透明度低(高度减小);
在第2层上使用亮度滤镜是可选的(根据图片):
-webkit-filter: blur(5px) brightness(120%); /* Chrome, Safari, Opera */
filter: blur(5px) brightness(120%);
jsfiddle 1 - regular bg;
jsfiddle 2 - white bg;
body {
width: 100vw;
height: 100vh;
background-color: rgb(255,204,255);
margin: 0%;
}
.bg1 {
width: 100%;
height: 100%;
background-image: url('http://i.imgur.com/tWZjcIp.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.bg1_5 {
width: 100%;
height: 20%;
position: absolute;
top: 0px;
background: rgba(174,116,187,0.5);
background-repeat: no-repeat;
background-size: cover;
}
.bg2 {
width: 100%;
height: 20%;
position: absolute;
top: 0px;
background-image: url('http://i.imgur.com/tWZjcIp.jpg');
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
.bg3 {
width: 100%;
height: 20%;
position: absolute;
top: 0px;
background: rgba(255,204,255,0.1);
background-repeat: no-repeat;
background-size: cover;
}
<div class="bg1"></div>
<div class="bg1_5"></div>
<div class="bg2"></div>
<div class="bg3"></div>