Remove mix-blend-mode from child element

Question

How can I set mix-blend-mode on an element, but not it's children? Setting the children to the default value of normal does not seem to work:

http://jsfiddle.net/uoq916Ln/1/

Answer 1

someone commented that the the whole block is rendered with the effect and that is why you're having the issue. I am able to accomplish what you're are trying to do by removing the h1 from the block, position absolute, and a z-index of 1. here is a jsfiddle to show the effect.

html

<div class="bkdg">
    <h1>Header</h1>
    <div class="blend">
    </div>
</div>

css

.blend {
    background-color: green;
    mix-blend-mode: multiply;
    width: 700px;
    height: 35px;
}
h1 {
    color: white;
    position: absolute;
    top: -15px; left: 10px;
    z-index: 1;
}

https://jsfiddle.net/jckot1pu/

Answer 2

I know this was asked over two years ago, but it could be useful in the future as it could be a better solution than creating pseudo-elements.

There is the CSS isolation property that allows to choose wether the child element should be rendered in its parent's context (auto) or as part of a new context, thus without any blend mode applied to it (isolate).

Check out this page for examples

Answer 3

The solution on how to avoid mix-blend-mode affects children:

1. Make child element position relative, give it a width and height;
2. Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
3. Create inner element inside the child for your content. Make it's position absolute, and put it on top of other elements;

Live example

html

<div class="bkdg">
    <div class="blend">
        <div class="inner">
            <h1>Header</h1>
        </div>
    </div>
</div>

css

.blend {
    position: relative; // Make position relative
    width: 100%;
    height: 100%;
}

.blend::before { // Apply blend mode to this pseudo element
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: green;
    mix-blend-mode: multiply;
}

.inner { // This is our content, must have absolute position
    position: absolute;
    z-index: 2;
}

h1 {
    color: white;
}