效果：解决了filter模糊和添加伪元素会模糊文字以及糊边的痛点
代码都贴过来了，但关键代码只有一行：backdrop-filter: blur(5px)
其思想就是在背景图片的盒子下一级放一个同样大小的盒子，相当于遮罩层
<style>
* {
margin: 0;
padding: 0;
}
.demo {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.photo_object {
width: 80%;
height: 80%;
background: url(https://img1.baidu.com/it/u=3388724121,114678878&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281) center / cover no-repeat;
}
.vague {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* 关键代码 */
backdrop-filter: blur(5px);
}
span {
color: white;
font-size: 50px;
}
</style>
<body>
<div class='demo'>
<div class='photo_object'>
<div class='vague'>
<span>这是文字</span>
</div>
</div>
</div>
</body>效果如下：
注：并非纯自创，只为了记录个人开发过程中的一些方法及解决思路。
