Hinzufügen von Filter: Graustufen zu img Elemente verbirgt überlagerte Elemente

Question

Aufgrund einiger lustiger kleiner Style Guide Änderungen müssen alle Bilder schwarz und weiß sein. Ich dachte, ein globaler Stil darum kümmern würde:

img { 
    filter: grayscale(100%) 
} 

Es wirkt wie ein Zauber, aber: Elemente, die plötzlich verschwinden auf der Bilder sitzen. Beispiel: Text, der über einem Bannerbild sitzt, verschwindet und ein ::before Element, das auf einem Bild sitzt, verschwindet.

Ist das erwartete Verhalten oder ist etwas Unheimliches passiert?

EDIT:

Der HTML ist nichts Besonderes:

<div class="wrapper"> 
    <div class="header-text"> 
     <h2>My Header Text</h2> 
    </div> 
    <img src="myimage.png" /> 
</div> 

.header-text ist absolut positioniert.

Answer 1

Der Filter beeinflusst die Stapelreihenfolge, die angepasst werden kann, indem der header-text div einen Z-Index-Wert zugewiesen wird.

Dies ist in der Spezifikation dokumentiert.

Filter Property

Ein berechneter Wert anderer als none Ergebnisse bei der Schaffung eines Stapelkontext [CSS21] die gleiche Art und Weise, dass CSS Undurchsichtigkeit der Fall ist.

.wrapper { 
 
    position: relative; 
 
} 
 

 
.header-text { 
 
    position: absolute; 
 
    color: white; 
 
    z-index: 1; 
 
} 
 

 
img { 
 
    filter: grayscale(100%); 
 
}

<div class="wrapper"> 
 
    <div class="header-text"> 
 
    <h2>My Header Text</h2> 
 
    </div> 
 
    <img src="http://www.placebacon.net/400/300?image=1" /> 
 
</div>

Answer 2

Sorry, wenn ich nicht kommentieren kann, nur antworten (aufgrund Punkte und Sachen)

Wenn Element-Filter hat zunächst seine Kinder mit diesem Element als Block enthält. Wenn der Filter dem Element dynamisch hinzugefügt wurde, werden überlaufende untergeordnete Elemente ausgeblendet.

Versuchen Sie, eine Klasse in Ihr IMG zu setzen und die Graustufen nur dort zu tun, kann es den Trick tun. Auch ein Z-Index kann helfen.