如何让drop-shadow滤镜的深色阴影仅投射在深色条纹，不在白底显示

现有方案的核心问题是：全局作用的drop-shadow滤镜会让投影无差别地渲染在元素下方的所有层级上，无法自动识别投影的承载面，自然会漏到最底层的白色基底上。此前尝试的混合模式方案存在逻辑偏差——黑色阴影在白色背景上对比度高会更显眼，在黑色横条上会和黑底融合，最终出现反向的显示效果。

要实现“阴影只在黑色横条上显示、白色区域完全无阴影”的效果，不需要依赖复杂的混合模式，仅通过独立阴影层+精准裁剪的方式，将阴影的显示范围严格限定在黑色横条区域内即可。

1. 重构DOM结构 #

将原PNG素材上的阴影效果拆分出独立的投影层，投影层的元素和原PNG素材一一对应，不携带任何素材实体的渲染逻辑，仅负责生成阴影效果，调整后的DOM结构为：

<div className="main-section-container">
  {/* 深色横条元素 */}
  <h3 className="main-section-title">About us</h3>

  {/* 原PNG容器：仅放置无阴影的素材本体，保持原有的前后交错层级 */}
  <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 className="about-us-shadow-layer">
    <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>

2. 调整SASS样式逻辑 #

• 移除所有原PNG元素上的drop-shadow滤镜，减少冗余渲染
• 给独立阴影层添加矩形裁剪规则，让阴影层的可见范围和黑色横条的位置、尺寸完全重合，超出横条范围的阴影部分全部裁切不可见
• 按原有交错逻辑调整各层z-index，保证层级正确：
  • 黑色横条后方的素材在最下层
  • 黑色横条在中间层
  • 独立阴影层压在横条上方、前层素材下方
  • 黑色横条前方的素材在最上层

.main-section-container
  position: relative

// 深色横条
.main-section-title
  position: relative
  z-index: 1
  background: $black
  width: 100%

// 原PNG素材容器（无阴影）
.about-us-image-container
  position: absolute
  inset: 0
  z-index: 2
  pointer-events: none
.about-us-image-container > *
  position: absolute
  top: -35%
  right: 40%
  width: 100%
  min-height: 600px
  transform-origin: 26% 19%
  will-change: transform

// 原位于横条后方的素材（justice-arm）
.justice-arm
  position: absolute
  inset: 0
  z-index: 0 // 放在横条下层

// 新增独立阴影层
.about-us-shadow-layer
  position: absolute
  inset: 0
  z-index: 1.5 // 刚好在深色横条（z-index:1）和前层素材（z-index:2）之间
  pointer-events: none
  // 核心裁剪：锁定阴影显示范围与深色横条完全对齐
  // 可根据实际横条尺寸调整clip参数，保证裁剪区域和横条矩形完全重合
  clip-path: inset(0 0 calc(100% - 深色横条实际高度) 0)
.about-us-shadow-layer > *
  // 完全复用原素材的定位、尺寸规则，和素材本体完全对齐
  position: absolute
  top: -35%
  right: 40%
  width: 100%
  min-height: 600px
  transform-origin: 26% 19%
  will-change: transform
  // 将原drop-shadow效果移至该层实现
  filter: drop-shadow(10px 4px 4px rgba(0,0,0,0.75))

• 阴影层因为被裁剪为和黑色横条完全重合的矩形范围，横条外的白色基底区域不会残留任何阴影
• 阴影层卡在横条和上层素材之间，所有素材投射在横条上的阴影会正常显示，包括位于横条后方的人形、天平部件的投影也会正常呈现
• 不依赖混合模式，从根本上避免了之前阴影反向显示的问题
• 后续如果素材位置、横条尺寸有动态调整，仅需要同步更新clip-path的裁剪参数，保证裁剪范围和横条对齐即可。

内容的提问来源于stack exchange，提问作者user8145466