gpt4 book ai didi

html - 通过 css 模糊没有背景图像的元素

转载 作者:行者123 更新时间:2023-12-04 15:32:29 24 4
gpt4 key购买 nike

使用 background-imagebody标记和
两个div在里面。
我需要为每个人设置模糊的背景div .
我现在能做的就是设置 background-image
每个div并使用 filter: blur属性来模糊它们。

但因为我想要整个页面的背景相同(每个 div 不分开),
我想要的方式是设置 background-imagebody标记然后模糊 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没有背景图像的元素。
有没有办法这样做?
谢谢

最佳答案

您要找的是 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>

关于html - 通过 css 模糊没有背景图像的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60921473/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com