Mix-Blend-Modus aus Child-Element entfernen

Question

Wie kann ich den Mix-Blend-Modus für ein Element einstellen, aber nicht für Kinder? Einstellen die Kinder auf den Standardwert von normal scheint nicht zu funktionieren:

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

Answer 1

jemand bemerkte, dass die der ganze Block mit dem Effekt wiedergegeben wird, und das ist, warum Sie das Problem haben. Ich bin in der Lage zu erreichen, was Sie versuchen, indem Sie die h1 aus dem Block, absolute Position und einen Z-Index von 1 zu entfernen. Hier ist eine Jfiddle, um den Effekt zu zeigen.

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

Die Lösung, wie mix-blend-mode Effekte Kinder zu vermeiden:

1. Stellen Kind Elementposition rel ative, gib es Breite und Höhe;
2. Erstellen Sie ein reales oder Pseudoelement innerhalb des untergeordneten Elements mit absoluter Position und wenden Sie mix-blend-mode darauf an;
3. Erstellen Sie inner Element im Inneren des Kindes für Ihren Inhalt. Mache seine Position absolut und lege sie auf andere Elemente.

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

Answer 3

Ich weiß, das vor mehr als zwei Jahren gefragt wurde, aber es könnte in der Zukunft nützlich sein, als es könnte eine bessere Lösung als cre sein pseudo-Elemente.

Es gibt die CSS isolation Eigenschaft, ob das Kind Element wählen können sollte in seinem übergeordneten Kontext (auto) oder als Teil eines neuen Kontext wiedergegeben werden, so dass ohne Mischmodus auf sie angewendet (isolate).

Check out this page für Beispiele