将混合模式应用于投影阴影

Question

是否可以仅将一个元素的投影与其重叠的元素的颜色混合？

例如：我有一个元素重叠在另一个元素上方。顶部元素具有浅灰色阴影。下面的元素是黑色的。我不想对任何元素本身应用混合，但希望重叠元素的阴影与下面的元素的颜色混合，在阴影落在重叠元素上的地方创建较暗的灰色。

如果我想将该效果应用于整个元素，包括阴影，则可以使用mix-blend-mode: multiply来实现。实际上，我只想在阴影上使用mix-blend-mode。这可行吗？

- mannystar

---

在你的问题中，你说你想让灰色阴影与黑色重叠的地方变得更暗。我只想指出 black * anything = black。 - laptou

不是严格意义上的黑色，只是为了简单起见而这样表述，但从技术上讲，它实际上是一种极暗的灰色，而不是黑色。 - mannystar

Answer 1

你不能直接这样做，但是你可以将阴影应用到一个伪元素上，该伪元素与原元素尺寸相同并使用叠加混合模式。

.above {
    position: absolute;
    background: green;
    width: 100px;
    height: 100px;
}

.above::before {
    box-shadow: 3pt 3pt 0 0 dodgerblue;
    mix-blend-mode: multiply;
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.below {
    position: absolute;
    top: 50px;
    left: 50px;

    width: 100px;
    height: 100px;

    background: red;
}

<div class="below">
</div>
<div class="above">
</div>

我在这里使用这些颜色只是作为示例，但您可以用自己的颜色替换它们。

- laptou

---

太棒了，完美地运行了 - 非常感谢 @laptou！ - mannystar

+1 这似乎适用于颜色名称，但不适用于十六进制值。即 box-shadow: grey 可以工作，但 box-shadow: #dddddd 不行。这是已知的限制吗？（我知道这是一个老问题。） - Scott