CSS如何设置背景模糊周边有白色光晕(解决方案)

宦梧桐

css设置背景模糊周边有白色光晕，如何解决？

1. <div class="img-box">
2. <img :src="xxx.png">
3. <div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div>
4. </div>

复制代码

1. .img-box {
2. width: 100%;
3. height: 212px;
4. text-align: center;
5. position: relative;
6. img {
7. width: 100%;
8. height: 100%;
9. position: relative;
10. z-index: 5;
11. }
12. .img-bg {
13. position: absolute;
14. top: 0;
15. left: 0;
16. width: 100%;
17. height: 100%;
18. background-size: 200%; /* 放大两倍 */
19. background-position: center;
20. background-repeat: no-repeat;
21. filter: blur(20px); /* 添加20模糊效果 */
22. overflow: hidden;
23. }
24. .img-bg::before {
25. content: "";
26. position: absolute;
27. top: 0;
28. left: 0;
29. width: 100%;
30. height: 100%;
31. background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
32. z-index: 1; /* 确保蒙层在背景之上 */
33. }
34. }

复制代码

需求：想要给一个展示图片的区域底部加一个该图片的放大后的背景，并模糊 20，并增加一个黑色 0.6 透明度的遮罩

但是按照上面代码实现后，周边有一圈白色光晕，如图：

解决方案：

使用backdrop-filter: blur(20px);

但是注意，backdrop-filter 不能直接加在背景图本身样式上，会导致不生效。

• 1. backdrop-filter

  复制代码
  属性需要在具有定位的元素上使用，例如
  1. position: relative

  复制代码
  或
  1. position: absolute；

  复制代码
• 1. backdrop-filter

  复制代码
  应用于的元素需要有一个背景元素在其后，通常是该元素的父级元素。如果没有这样的背景元素，
  1. backdrop-filter

  复制代码
  将不会生效。确保父级元素有可见的背景内容。

所以我们将

1. backdrop-filter

复制代码

放在 img-bg::before 里，即可生效：

1. .img-bg::before {
2. content: "";
3. position: absolute;
4. top: 0;
5. left: 0;
6. width: 100%;
7. height: 100%;
8. background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
9. z-index: 1; /* 确保蒙层在背景之上 */
10. backdrop-filter: blur(20px); /* 添加20模糊效果 */
11. }

复制代码

这样就白色光晕的效果了。

到此这篇关于CSS如何设置背景模糊周边有白色光晕的文章就介绍到这了,更多相关css背景模糊内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章，希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

吴所谓TV

路过，支持一下

破为情么

感谢楼主分享。