我正在尝试让盒子阴影在不同的背景下很好地播放。标准的方法似乎是使用混合混合模式，并在真正的div后面应用一个假div。
此处是此技术的示例(单击右上角的+图标(。
如果我稍微修改一下这段代码，将非背景元素包装到一个带有position: fixed的容器中，它就会中断，例如这里的例子。注意，position: absolute运行良好。
我确实需要一个像示例一样的结构，一个position-fixed和混合的父元素，它可以容纳可变的高度或宽度以及.box元素的多个实例。我可以大胆地猜测为什么它不起作用(fixed将它从文档流中分离出来，因此没有什么可混合的(，但我看不到绕过它的方法。
我做的另一个例子使事情减少了一点，注意如果你注释掉position-fixed，它是如何工作的：
.blend {
height: 100%;
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.box {
background: grey;
min-height: 10px;
width: 100%;
position: relative;
margin: 0 0 15px;
}
.container {
/* using absolute works */
position: absolute;
/* using fixed does not work */
position: fixed;
height: 50%;
width: 50%;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}<div class="column left"></div>
<div class="column right"></div>
<div class="container">
<div class="box">
text
<div class="blend"></div>
</div>
<div class="box">
text<br /><br />more text
<div class="blend"></div>
</div>
</div>(我看到了之前的一个问题，看起来很相似，但我无法让他们的例子来检查(
您可以将混合元素移出容器，并使其固定为与容器相同的尺寸。
签出代码段：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{
height:100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}
.blend {
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: fixed;
height: 50%;
width: 50%;
}
.box {
background: grey;
height: 100%;
width: 100%;
position: absolute;
}
.container {
position: fixed;
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<div class="column left"></div>
<div class="column right"></div>
<div class="blend"></div>
<div class="container">
<div class="box">
text
</div>
</div>
</body>
</html>3.2。HTML特有的行为
CSS中创建堆叠上下文的所有内容都必须被视为"孤立"组。HTML元素本身不应该创建组。应用了混合的元素必须与该元素所属的堆叠上下文的所有底层内容混合。
例如。position: fixed将创建一个堆叠上下文(隔离组(。
https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
更具体的堆叠上下文相关答案：https://stackoverflow.com/a/56545440/7947839