在body标记上使用background-image里面有两个div。我需要每个都有模糊的背景div
我现在能做的就是打开background-image每个CCD_ 6并使用CCD_。
但是因为我想要整个页面的相同背景(对于每个CCD_ 8不分开(，我想要的方式是设置background-image在CCD_ 10标签上，然后模糊CCD_。
这就是我尝试过的：
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元素。有办法做到这一点吗？感谢
您要找的是backdrop-filter
body {
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>