css - 有没有办法混合深色阴影滤镜以不显示在浅色（白色）背景上？

Question

我想做一件非常棘手的事情，但我不确定是否可以做到。

我有一些堆叠的PNG，透明背景在一些深色条纹的前面和下面编织。我希望 PNG 在深色条纹上投下阴影，而不是在底层的白色图像上投下阴影。

这是我目前拥有的屏幕截图，因为我不认为我将能够正确描述它。

我希望头部和比例继续将阴影投射到条纹上，但我不希望任何东西在白色背景上投射阴影。

我知道如何使用 box-shadow（之前/之后滥用）来完成此操作，但我对如何使用filter: drop-shadow. 我尝试使用混合混合模式，但我能够完成相反的操作 -仅在白色背景上而不是条纹上放置阴影。

为了清楚起见 - 黑色条纹是一个 HTML 元素，而不是任何 PNG 图层的一部分。

编辑添加代码：

HTML（反应）：

<div className="main-section-container">
  <h3 className="main-section-title">About us</h3> {/* This is the stripe */}

  <div className="about-us-image-container">
    <img src={justiceBg} className="justice-bg" />
    <img src={justiceArm} className="justice-arm" />
    <img src={scaleBase} className="justice-scale-base" />
    <img src={scaleLeft} className="justice-scale-left" />
    <img src={scaleRight} className="justice-scale-right" />
  </div>
</div>

萨斯：

.main-section-title
  background: $black
  width: 100%

.about-us-image-container
   position: relative
.about-us-image-container > *
   position: absolute
   top: -35%
   right: 40%
   width: 100%
   min-height: 600px
   transform-origin: 26% 19%
   will-change: transform
   filter: drop-shadow(10px 4px 4px rgba(0,0,0,0.75))

.justice-arm
   z-index: -1

标签： css