css設定背景模糊周邊有白色光暈，如何解決？

蓓蕾心晴發表於2024-03-20
CSS
<div class="img-box">
        <img :src="xxx.png">
             <div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div>
</div>
.img-box {
    width: 100%;
    height: 212px;
    text-align: center;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 5;
    }
    .img-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 200%; /* 放大兩倍 */
      background-position: center;
      background-repeat: no-repeat;
      filter: blur(20px); /* 新增20模糊效果 */
      overflow: hidden;
    }
    .img-bg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
      z-index: 1; /* 確保蒙層在背景之上 */
    }
  }

需求：想要給一個展示圖片的區域底部加一個該圖片的放大後的背景，並模糊 20，並增加一個黑色 0.6 透明度的遮罩

但是按照上面程式碼實現後，周邊有一圈白色光暈，如圖：

解決方案：

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

但是注意，backdrop-filter 不能直接加在背景圖本身樣式上，會導致不生效。

  • backdrop-filter 屬性需要在具有定位的元素上使用，例如 position: relative 或 position: absolute；
  • backdrop-filter 應用於的元素需要有一個背景元素在其後，通常是該元素的父級元素。如果沒有這樣的背景元素，backdrop-filter 將不會生效。確保父級元素有可見的背景內容。

所以我們將 backdrop-filter 放在 img-bg::before 裡，即可生效：

.img-bg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
      z-index: 1; /* 確保蒙層在背景之上 */
      backdrop-filter: blur(20px); /* 新增20模糊效果 */
    }

這樣就白色光暈的效果了。

相關文章