How to use mix-blend-mode, but not have it affect child elements?

Question

Okay, so I'm building a WordPress site and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/

The issue I am having is that I am using mix-blend-mode for one of my div containers to make use a 'lighten' blend on the background.

It works perfectly, but the issue I am having is that unfortunately the child elements inside the container (i.e. the text) are also inheriting the blend mode, and therefore it's making my text 'blend' as well, which isn't what I want (I want the text to have NO blend mode).

Anyways, you can see the code I am using below:

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

I tried applying something like 'mix-blend-mode: none;' to the text, but that doesn't work.

I've searched Google for an answer to this pretty extensively, but alas, there isn't much on this topic (if anything at all).

Answer 1

I realise you asked this a while ago but I've been playing with the same issue today and managed to fix it like this.

Wrap the content inside the #category-intro-text div with another div that is positioned relatively. Ultimately, you'll want to add the style to your css and not inline as I've done here.

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

Then remove the background colour and blending information you've got in the stylesheet for the #category-intro-text div. You should end up with...

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

Finally, use a ::before pseudo element to add the blended layer.

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

Hopefully that will do it. It is working perfectly for me with a multiply layer.

EDIT: Here is a Fiddle forked from the previous answer.

Answer 2

I thought I had it worked out with the isolation property, but no. I didn't have much luck researching a solution for this issue either.

I suppose you could use this old trick: 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;
}