最近发现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是能完美支持的(