css – 如何使用mix-blend-mode,但不会影响子元素？

#category-intro-text {
    padding: 0.625em 0.938em;
    mix-blend-mode: lighten;
    BACkground-color: rgba(220,235,255,0.8); repeat;
}

我意识到你刚才问过这个问题,但我今天一直在玩同样的问题,并设法解决这个问题.

将#category-intro-text div中的内容与另一个相对定位的div包装在一起.最终,你会想要将风格添加到你的CSS而不是像我在这里所做的那样内联.

<div id="category-intro-text">
    <div style="position: relative;">   
        <h1>Power Line Markers</h1>
        Etc. Etc.
    </div>
</div>

然后删除背景颜色并混合您在#category-intro-text div的样式表中获得的信息.你最终应该……

#category-intro-text {
  padding: 0.625em 0.938em;
  position: relative;
}

最后,使用:: before伪元素添加混合层.

#category-intro-text::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  BACkground-color: rgba(220,0.8);
  mix-blend-mode: lighten;
}

希望能做到这一点.它通过多层来完美地为我工作.

编辑：@L_618_1@从前一个答案分叉.