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

好的,所以我正在构建一个WordPress网站,有问题的页面可以在这里看到： http://test.pr-tech.com/power-line-markers/

我遇到的问题是我在我的div容器中使用mix-blend-mode来在背景上使用’lighten’混合.

它完美地工作,但我遇到的问题是,不幸的是容器内的子元素(即文本)也继承了混合模式,因此它也使我的文本“混合”,这不是我想要的(我希望文本没有混合模式).

无论如何,你可以看到我在下面使用的代码：

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

我试过应用’mix-blend-mode：none;’之类的东西.到文本,但这不起作用.

我已经在谷歌搜索了这个相当广泛的答案,但是,这个主题并没有多少(如果有的话).

解决方法

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

将#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;
}

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

编辑：Here is a Fiddle从前一个答案分叉.