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

Question

好的,所以我正在建立一个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;'之类的东西.到文本,但这不起作用.

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

Answer 1

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

#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-textdiv 的样式表中获得的信息.你最终应该......

#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, 235, 255,0.8);
  mix-blend-mode: lighten;
}

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

编辑:这是一个从上一个答案分叉的小提琴.

Answer 2

我以为我已经解决了isolation，但没有。我也没有太多运气研究这个问题的解决方案。

我想你可以使用这个老把戏： http: //jsfiddle.net/cwdtqma7/

HTML：

<div class="intro-wrap">
    <div class="intro-background"></div>
    <div class="intro-content">
        <h1>Hello</h1>
        <p>Welcome to the thing.</p>
    </div>
</div>

CSS：

body {
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat;
    background-size: 800px;
    font-family: sans-serif;
}
.intro-wrap {
    position: relative;
}
.intro-background {
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png');
    mix-blend-mode: lighten;
    padding: 32px;
    width: 300px;
    height: 300px;
}
.intro-content {
    position: absolute;
    top: 0;
    left: 32px;
}