如何使用透明的div實現頁面背景模糊效果
我有一個網頁的程式碼，我希望透過一個透明的div來使背景模糊。我實際上想要讓div半透明。
我嘗試為div添加模糊濾鏡的CSS，但結果是div內部的文字也被模糊了，這不是我想要的。
<body style="background-image: url('bg.jpg')">
<div>
Some text
</div>
</body>我有一個網頁的程式碼，我希望透過一個透明的div來使背景模糊。我實際上想要讓div半透明。
我嘗試為div添加模糊濾鏡的CSS，但結果是div內部的文字也被模糊了，這不是我想要的。
<body style="background-image: url('bg.jpg')">
<div>
Some text
</div>
</body>
P粉3948122772023-09-15 11:55:28
嘗試以下操作，使用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>