CSS3教程实现模糊透明玻璃效果

利用background-attachment:fixed这个属性值可以做出很多看起来很酷炫的效果。

基础说明

background-attachment含有3个属性值。

1. scroll（背景图像会随着页面其余部分的滚动而移动。）
2. fixed（不会跟随页面其余部分的滚动而移动，固定不变）
3. inherit（继承父元素的background-attachment的值）

涉及知识点小解

1. 已经定位的元素设置,top:0;left:0;right:0;bottom:0。如果没有设置元素大小，则会平铺父元素的大小。
2. background-attachment:fixed的合理使用

效果展示

代码

.section{
min-height: 100vh;
background: url('./1.jpg');
background-attachment: fixed;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.box{
position: relative;
padding:50px;
box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
.box::after{
content:'';
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('./1.jpg');
background-attachment: fixed;
z-index: 1;
filter:blur(5px);
}
.box h3,.box p{
position: relative;
z-index: 2;
text-transform: uppercase;
}