Mix-harmanlama modunu alt öğe elemanından çıkarın

Question

Karışım karışım modunu bir öğeye nasıl ayarlayabilirim, ancak çocukları değil? normal varsayılan değerine çocukları ayarlama çalışmak için görünmüyor:

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

Answer 1

birisi tüm blok etkisi ile oluşturulur ve sorunu yaşıyorsanız bu yüzden yorumunu yaptı. Yaptığınız şeyi, h1'i bloktan, mutlak pozisyondan ve 1'in bir z-indeksinden çıkararak gerçekleştirebiliyorum. Burada, efekti göstermek için bir jsfiddle var.

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

mix-blend-mode etkileri çocukları nasıl önlenebileceği çözüm:

1. olun alt öğesi pozisyon rel ative, genişlik ve yükseklik ver;
2. Çocuğun içinde mutlak konuma sahip bazı gerçek veya sahte öğeler oluşturun ve ona mix-blend-mode uygulayın; İçeriğiniz için çocuğun içinde inner öğesi oluşturun. Pozisyonunu mutlak hale getirin ve diğer öğelerin üstüne koyun;

Live example

html

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

css

Bu iki yıl önce istendi biliyorum ama geleceği olarak yararlı olabilir

.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

Cre'den daha iyi bir çözüm olabilir. sözde elemanlar ating. alt öğe böylece o (isolate) uygulanan herhangi bir harman modu olmayan, ebeveyninin bağlamı (auto) veya yeni bir bağlamın parçası olarak içinde oluşturulması gereken Hava seçmenize olanak verir CSS isolation mülkiyet yoktur

.

Kontrol dışarı this page örnekler