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

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

基础说明

background-attachment含有3个属性值。

scroll(背景图像会随着页面其余部分的滚动而移动。)

fixed(不会跟随页面其余部分的滚动而移动，固定不变)

inherit(继承父元素的background-attachment的值)

涉及知识点小解

已经定位的元素设置,top:0;left:0;right:0;bottom:0。如果没有设置元素大小，则会平铺父元素的大小。

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;

}

原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/68.html