简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何使用透明的div實現頁面背景模糊效果
P粉908643611
P粉908643611 2023-09-14 21:09:28
0
1
478

我有一個網頁的程式碼，我希望透過一個透明的div來使背景模糊。我實際上想要讓div半透明。

我嘗試為div添加模糊濾鏡的CSS，但結果是div內部的文字也被模糊了，這不是我想要的。 

<body style="background-image: url('bg.jpg')">
  <div>
    Some text
  </div>
</body>
P粉908643611
P粉908643611

全部回覆(1)
P粉394812277
P粉3948122772023-09-15 11:55:28 1樓

嘗試以下操作，使用CSS的backdrop-filter: blur屬性，並更改background-color的opacity：

<head>
  <style>
    body {
      background-image: url('bg.jpg');
    }

    .translucent-div {
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      width: 300px;
      height: 200px;
      margin: 50px auto;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="translucent-div">
    一些文本
  </div>
</body>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！