我有一个带有模糊背景图像的小页面。在其上方，我设置了作为卡片的div，它们在背景图像上具有透明叠加层。我正在尝试使用混合模式设置文本效果，而不考虑叠加层。
我想要复制的文本效果在这个codepen中：https://codepen.io/thebabydino/pen/JNWqLL 具体来说，我想要复制左侧的示例，其中投影颜色与文本一起反转，并且文本是下面图像的反转。
在我的尝试中，我无法使混合模式效果忽略不透明层并仅专注于图像。
不透明层的目的是帮助文本更加突出，但似乎产生了相反的效果，因为它影响混合，使所有内容变暗。
文本之所以只是橙色，是因为由于较暗的不透明层并完全忽略下面的图像而不断反转。
这是我的尝试：
我该如何使用混合模式效果来反转图像底部，同时忽略文本和图像之间的叠加层？如果这种方法不可行，有什么替代方法可以实现相同的结果？
我想要复制的文本效果在这个codepen中：https://codepen.io/thebabydino/pen/JNWqLL 具体来说，我想要复制左侧的示例，其中投影颜色与文本一起反转，并且文本是下面图像的反转。
在我的尝试中，我无法使混合模式效果忽略不透明层并仅专注于图像。
不透明层的目的是帮助文本更加突出，但似乎产生了相反的效果，因为它影响混合，使所有内容变暗。
文本之所以只是橙色，是因为由于较暗的不透明层并完全忽略下面的图像而不断反转。
这是我的尝试：
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
font-family: 'Squada One', sans-serif !important;
}
body::before {
content: '';
background-image: url("https://images.unsplash.com/photo-1641119554941-1c286b163e1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
transform: scale(1.1);
}
.parenttile {
margin: 0 auto;
text-align: center;
display: flex;
align-items: center!important;
}
.link_wrapper2 {
width: auto;
padding: 0px;
}
.boxborder {
border-color: blue;
border-width: 0.3em;
border-style: solid;
border-radius: 15px !important;
}
.front {
position: relative;
z-index: 2 !important;
}
.blend {
text-shadow: 0 2px 2px #fdee00;
-webkit-filter: invert(100%);
filter: invert(100%);
mix-blend-mode: lighten;
}
.test-box:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.20);
z-index: 1;
}
.test-box {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
background-size: cover;
background-repeat: no-repeat;
height: 150px;
border-radius: 15px !important;
position: relative;
}
header.blending h2 {
color: white;
text-shadow: 0 3px 1px orange;
mix-blend-mode: difference;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="columns is-centered desktop front">
<div class="column is-9">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-4 is-parent">
<div class="tile is-child box test-box boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<div class="link_wrapper2 is-align-items-center is-flex blend front">
<header class="blending">Contrasting Text Example</header>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.blurDivCSS规则。哪个元素需要具有.blurDiv类？ - the Hutt