最近在写活动页面遇到一个效果,在黑色透明蒙层后面的元素要有模糊,毛玻璃的效果,最初想到的就是filter: blur(2px)
,直接在元素上使用,但是整个子元素都被模糊了,而且蒙层的背景并没有效果,经过百般搜索和尝试,发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果,而且还不会影响到子元素的展示,它就是backdrop-filter: blur(3px)
,完美的实现了设计稿的要求。
下面就来看看这两个属性的区别,遇到的问题以及解决方案。
filter
filter
CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素,可以直接在元素上加filter: blur(2px)
,如果这个元素下面有子元素,这样写子元素也会被模糊,解决方法是使用伪元素加定位效果实现:
// html
<section class="wrap">
我是子元素。不想被模糊
</section>
// style
.wrap {
width: 200px;
height: 200px;
background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg') no-repeat;
color: blue;
font-size: 18px;
z-index: 999;
position: relative;
}
.wrap::before {
content: '';
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
backdrop-filter
backdrop-filter
CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果,可以直接在蒙层元素上使用backdrop-filter: blur(2px);
即可。
.modal {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 999;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(2.5px);
}
这两个属性的使用可以详细的参考 mdn上的描述:
backdrop-filter
filter
网友评论