效果：解决了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>
效果如下：
注：并非纯自创，只为了记录个人开发过程中的一些方法及解决思路。
