如何使用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

我知道你刚才问了这个问题，但我今天一直在处理同样的问题，并设法像这样解决了它。

用另一个相对位置的div包装#category-intro-text 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, 235, 255,0.8);
  mix-blend-mode: lighten;
}

希望这能解决这个问题。这是一个完美的工作与我的多层。

编辑:从上一个答案派生的Here is a Fiddle。

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

Answer 3

既然已经有了background-blend-mode(maybe，为什么还要使用mix-blend-mode呢？)为了这个目的。实际上，mix-blend-modes将它所应用的元素与它下面的所有元素混合在一起。另一方面，应用在背景上的背景混合模式只与它下面的背景混合。

你能做到的-

.outer-wrapper {
background: url(<url>), #fb3;
background-blend-mode: exclusion;
padding: 2em 4em;
}

.inner-text {
/**styling of you text***/
}