可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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/

回答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/

回答2:

The solution how to avoid mix-blend-mode effects children:

Make child element position relative, give it width and heigh;
Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
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; }

回答3:

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

文章来源: Remove mix-blend-mode from child element

标签

position