一、filter
这种方式有白边,需要把盒子设置大一点,把白边隐藏。
<div class="bg-box">
<div class="bg"></div>
<div>
<style>
.bg-box{
width:100%;
heigth:100%;
position:relative;
overflow:hidden;
}
.bg{
position:absolute;
top: -2.5%;
left: -2.5%;
z-index: -2;
height: 105%;
width: 105%;
filter: blur(5px);
}
二、backdrop-filter
适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
在需要模糊的盒子上添加一层遮罩的盒子
<div class="box">
需要模糊的内容
<div>
<div class="filter"></div>
<style>
.filter{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
backdrop-filter: blur(2px);
}
</style>
详细可看
filter - CSS(层叠样式表) | MDN
backdrop-filter - CSS(层叠样式表) | MDN
CSS实现模糊