Remove mix mode from child

Question

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

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

Answer 1

someone commented that the entire block is rendered with effect, and that is why you have a problem. I can accomplish what you are trying to do by removing h1 from the block, absolute position and z-index 1. Here is 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

The decision to avoid mix-blend-mode affects children:

• Make the position of the child relative, give it the width and height;
• Create some real or pseudo-element inside the child element with absolute position and apply mix-blend-mode ;
• Create an inner element inside the child element for your content. Make the position absolute and place it on top of other elements;

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

Answer 3

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

There is a CSS isolation property that allows you to choose whether the child is displayed in its parent context ( auto ) or as part of the new context, thus without the isolate mode applied to it.

See this page for examples.