[FIXED] Wie ändere ich die Deckkraft der oberen Bildschicht mit CSS?

Ausgabe

Ich habe ein Bild mit 2 Zuständen: Normalzustand mit Schwarzweiß und Hover-Zustand mit Farben. In Photoshop habe ich 2 Ebenen erstellt: Hintergrundebene und oberste Ebene. Ich möchte, dass die Hintergrundebene als normaler Zustand angezeigt wird und wenn ich darüber schwebe zeigt die oberste Schicht. Gibt es eine Möglichkeit, die Deckkraft-CSS-Option nur auf die oberste Ebene anzuwenden? so wie ich es 0 im Normalzustand und 1 im Hover machen kann? oder muss ich 2 Bilder machen und das zweite anstelle des ersten im Hover anzeigen?

Ich habe die TIFF-Erweiterung ausprobiert, die die Ebenen speichert, aber wenn ich die Deckkraft auf 0 ändere, wird das Bild dunkel, was bedeutet, dass die Deckkraft auf alle Ebenen angewendet wird.

Lösung

Ich habe diese Lösung mit JavaScript gefunden: die normale Statusdatei: 1.png die Hover-Statusdatei: 1.png.png

<img id="my-img" alt="" src="1.png"
onmouseover="hover(this);" onmouseout="unhover(this);" />
<script>
function hover(element) {
element.setAttribute('alt', element.src );
element.setAttribute('src', element.src  +'.png');
}

function unhover(element) {
element.setAttribute('src', element.alt);
}
</script>

Beantwortet von – ARDV

Antwort geprüft von – Dawn Plyler (FixError Volunteer)