我在制作自己的博客的时候，打算做个封面，封面用半透明颜色盖住了预览图，上面印上了文字，但背景图太乱了，所以打算给背景加模糊效果。
效果
方法
主要就是利用这个属性
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;
}
