I have the code for a web page, and I want to blur the background through a transparent div. I actually want to make the div semi-transparent.
I tried to add blur filter CSS to the div, but the result is that the text inside the div is also blurred, which is not what I want.
<body style="background-image: url('bg.jpg')">
<div>
Some text
</div>
</body>
P粉3948122772023-09-15 11:55:28
Try the following, using CSS's backdrop-filter: blur property, and changing the opacity of background-color:
<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>