Rimuovi mix-blend-mode dall'elemento figlio

Question

Come posso impostare la modalità mix-mix su un elemento, ma non i suoi bambini? Impostazione dei bambini al valore predefinito di normal non sembra funzionare:

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

Answer 1

qualcuno ha commentato che il l'intero blocco è reso con l'effetto e che è il motivo per cui hai il problema. Sono in grado di realizzare quello che stai cercando di fare rimuovendo l'h1 dal blocco, la posizione assoluta e uno z-index di 1. Ecco un jsfiddle per mostrare l'effetto.

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

La soluzione come evitare mix-blend-mode effetti figli:

1. Trucco elemento figlio di posizione rel ative, dargli larghezza e altezza;
2. Creare qualche elemento reale o pseudo all'interno del bambino con posizione assoluta e applicare mix-blend-mode ad esso;
3. Creare l'elemento inner all'interno del bambino per il contenuto. Rendi la sua posizione assoluta e mettila sopra altri elementi;

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

So che questo è stato chiesto più di due anni fa, ma potrebbe essere utile in futuro potrebbe essere una soluzione migliore di Cre a pseudo-elementi.

C'è la isolation proprietà CSS che permette di scegliere l'elemento che scendessimo bambino dovrebbe essere reso in un contesto di suo genitore (auto) o come parte di un nuovo contesto, quindi senza alcun metodo di fusione applicato ad esso (isolate).

Partenza this page per gli esempi