通过CSS模糊没有背景图像的元素
使用background-imageonbody标签和div其中的two 。我需要为每个都有模糊的背景 div。
我现在能做的就是对background-image每个进行设置div并使用filter: blur属性来模糊它们。
但因为我希望整个页面具有相同的背景（不为每个页面分开div），所以我希望它的方式是在标签background-image 上设置body，然后模糊div元素。
这就是我尝试过的：
body {
background-image: url(public/images/billy-huynh-W8KTS-mhFUE-unsplash\ \(1\).jpg);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
position: relative;
}
.parent-div::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(5px);
}
.parent-div {
position: relative;
}
HTML 代码：
<body>
<div class=" parent-div">
<div class=" child-div">
<h4 class=" text-light">Hello world!!</h4>
</div>
</div>
<div class=" parent-div">
<div class=" child-div">
<h4 class=" text-light">Hello world!!</h4>
</div>
</div>
事实上，我想模糊div没有背景图像的元素。有办法这样做吗？谢谢
狐的传说0回答
-
眼眸繁星
您正在寻找的是backdrop-filterbody { background-image: url(https://i.picsum.photos/id/174/800/800.jpg); background-attachment: fixed; background-size: cover; height: 100vh; margin:0; position: relative;}.parent-div { position: relative; height:50vh; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}<div class=" parent-div"> <div class=" child-div"> <h4 class=" text-light">Hello world!!</h4> </div></div><div class=" parent-div"> <div class=" child-div"> <h4 class=" text-light">Hello world!!</h4> </div></div>
随时随地看视频慕课网APP
相关分类
Html5