我有一個網頁的程式碼，我希望透過一個透明的div來使背景模糊。我實際上想要讓div半透明。
我嘗試為div添加模糊濾鏡的CSS，但結果是div內部的文字也被模糊了，這不是我想要的。
<body style="background-image: url('bg.jpg')"> <div> Some text </div> </body>
嘗試以下操作，使用CSS的backdrop-filter: blur屬性，並更改background-color的opacity：
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>
嘗試以下操作，使用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>