我正在尝试实现这个图像：
其中，带有文本“Dog”的 div 被部分覆盖并且blurring图片。所以我尝试了这个：
.profile {
background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(10px); // should do the trick but not working??
}
<body class="profile">
<div class="name">Dog</div>
</body>
正如您所看到的，虽然 div 具有正确的颜色/不透明度，但它不是blurring它覆盖的图像部分。
如果应用了背景滤镜<div class="name"></div>，那么它不应该影响它后面的元素（即<body class="profile">）？我对自己做错了什么感到困惑。如果有人能指出我正确的方向，我将不胜感激。谢谢！
这对我有用：
- Change
<body class="profile"> to something like <div class="profile">.
-
<body> is a specialHTML 元素。
- Remove
opacity: 0.6。它使整个元素半透明，这不是您想要的。
- 相反，更改
background-color to rgba( 0, 0, 0, 0.6 )- 那么backdrop通过这个半透明的背景将部分可见。
- 另外，我更换了
width: 100% with right: 0; as width: 100%将受到影响box-sizing:当您处理 HTML 文本内容时，这会让您陷入困境。
- 您还需要添加
position: relative; to .profile所以这样.name's position: absolute works.
.profile {
width: 250px;
height: 250px;
position: relative;
background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
background: rgba( 0, 0, 0, 0.6 );
backdrop-filter: blur(10px);
color: white;
text-align: center;
}
<div>
<div class="profile">
<div class="name">Dog</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
