Farbbild im Graustufen (100%) Container

Question

Ich habe ein div mit einem Hintergrundbild und ich benutze einen Filter um es in schwarz und weiß anzuzeigen (filter: grayscale(100%);). Ich versuche jetzt ein Farbsymbol in dieses div einzufügen. Versucht, das Symbol auf grayscale(0%) zu setzen, aber das scheint nicht zu funktionieren. Hier

ein Beispiel:

#a1, #a2 { 
 
    background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
#a1 { 
 
    height: 250px; 
 
    width: 250px; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    position: relative; 
 
} 
 
#a2 { 
 
    height: 50px; 
 
    width: 50px; 
 
    -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div id="a1"><!-- << this should be black and white --> 
 
    <div id="a2"><!-- << this should be color --> 
 
    </div> 
 
</div>

Gibt es eine Möglichkeit, dies zu tun, ohne eine zusätzliche div Erstellung des Hintergrundbildes zu halten? Der echte Code ist viel komplexer, deshalb möchte ich die extra div (s) vermeiden, wenn möglich.

Answer 1

Ja natürlich, sollten Sie ::before und ::after pseudo-Elemente verwenden:

#a1 { 
 
    height: 250px; 
 
    width: 250px; 
 
    position: relative; 
 
} 
 
#a1:after, #a1:before { 
 
    content: ''; 
 
    background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    position: absolute; 
 
} 
 
#a1:before { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#a1:after { 
 
    height: 50px; 
 
    width: 50px; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div id="a1"></div>

DEMO on JSFiddle

Answer 2

Es ist nicht möglich, Farbe in einem Behälter mit filter: grayscale(100%) zu haben.

Siehe the filter property in der Spezifikation (Hervorhebung von mir):

einen berechneten Wert von anderen als none Ergebnisse in der Schaffung eines stacking context die gleiche Art und Weise, dass CSS opacity tut. Alle die Elemente Nachkommen sind als Gruppe zusammen mit die zu der Gruppe als Ganzes angewendet Filtereffekt erbracht.

Also ja, Sie müssen den Inhalt mit dem Filter aus dem Inhalt ohne es trennen.

Dies bedeutet nicht notwendigerweise, dass Sie zusätzliche Wrapper in Ihrem HTML benötigen, da Hiszpan vorschlägt, dass Sie auch Pseudo-Elemente verwenden können.