我在制作自己的博客的时候，打算做个封面，封面用半透明颜色盖住了预览图，上面印上了文字，但背景图太乱了，所以打算给背景加模糊效果。

效果

方法

主要就是利用这个属性

backdrop-filter: blur(5px);

属性很简单，但要想模糊的效果不影响文字，就需要把它加在合适的地方

• 我的html结构是

<div className={styles.container}><div className={styles.bg}></div><h1 className={styles.title}>个人博客</h1>
</div>

其中，backdrop-filter样式要添加在bg里面，这样才不会影响到h1

• css代码如下

.bg {width: 100%;height: 100%;backdrop-filter: blur(5px);
}
.title {left: 0;background: url('./resume.png');background-repeat: no-repeat;background-size: cover;
}