CSS中实现毛玻璃(背景模糊内容不模糊)效果

最近发现css中有这样一个样式:

backdrop-filter: blur(10px);

不同于filter:blur(10px)的是,这样可以使背景模糊而内容不模糊
效果如下:

filter
backdrop-filter

代码如下:

<div class="main">
    <div class="filter">filter</div>
    <div class="backdrop-filter">backdrop-filter</div>    
</div>
<style>
.main{
    display: flex;
    background: linear-gradient(to left, rgb(255, 107, 132), rgb(202, 240, 255));
    width: 300px;
    height: 150px;
}
.filter{
    width:100px;
    height:100px;
    background-color: rgba(255, 255, 255, 0.5);
    filter:blur(2px);
}
.backdrop-filter{
    width:100px;
    height:100px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter:blur(10px);
}
</style>

当然,这个效果比较吃性能,firefox目前也不支持这个效果

目前chrome是能完美支持的(

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注