1. 犀牛前端部落首页
  2. Arduino和RaspberryPi

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的合理使用

效果展示

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

代码

.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

发表评论

登录后才能评论