【前端学习——css】css实现给背景的图片加模糊

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

效果

方法

主要就是利用这个属性

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;
}