解决背景模糊白边问题以及模糊覆盖子元素

Blooming_x 2024-03-27
34 阅读 0 评论 0 点赞
解决背景模糊白边问题以及模糊覆盖子元素

1.这个就是正常思路实现背景模糊会出现的问题。

New Image

2.解决方案：使用伪元素继承父元素的背景，然后给伪元素添加高斯模糊，因为伪元素不会被父元素的子元素继承，所以问题就解决了。

New Image

代码：

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         .container {
  7.             position: relative;
  8.             width: 100vw;
  9.             height: 100vh;
  10.             background: url("image/bag.png") center / 100% 100% no-repeat;
  11.         }
  12.         .container::before {
  13.             content: '''';
  14.             width: 100%;
  15.             height: 100%;
  16.             position: absolute;
  17.             left: 0;
  18.             top: 0;
  19.             background: inherit;
  20.             filter: blur(15px);
  21.         }
  22.         .content {
  23.             position: absolute;
  24.             left: 50%;
  25.             top: 50%;
  26.             transform: translate(-50%, -50%);
  27.             width: 100px;
  28.             height: 100px;
  29.             line-height: 100px;
  30.             text-align: center;
  31.             background: white;
  32.         }
  33.     </style>

 html

  1. <body>
  2.     <div class="container">
  3.         <div class="content">
  4.             背景模糊
  5.         </div>
  6.     </div>
  7. </body>

 

 

标签： 技术社区

相关文章