搜尋

首頁  >  問答  >  主體

如何使用透明的div實現頁面背景模糊效果

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

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

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

全部回覆(1)我來回復

  • P粉394812277

    P粉3948122772023-09-15 11:55:28

    嘗試以下操作,使用CSS的backdrop-filter: blur屬性,並更改background-coloropacity

    <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
  • 取消回覆