Einzelnen Beitrag anzeigen
Ungelesen 12.03.18, 09:16   #1
Prenzlberger
Anfänger
 
Registriert seit: Aug 2009
Beiträge: 5
Bedankt: 0
Prenzlberger ist noch neu hier! | 0 Respekt Punkte
Standard css Masking Problem

Hi zusammen,

ich versuche mich gerade an masking in css und irgendwie krieg ich es nicht hin.
Was ich gerne erreichen möchte:
Ich habe eine png-Datei mit einer weißen grafik und transparentem Hintergrund und eine vollflächig einfarbige png-Datei.
Die 2. setze ich als src in einem img. Die 1. nehme ich als mask.
Ziel soll sein, dass die weiße Grafik in der Farbe erscheint die in der vollflächigen enthalten ist.

Hintergrund:
Ich will ermöglichen, dass Benutzer einfache Icons in png-Format (nur weiße Grafik und transparenter Hintergrund) hochladen können und diese dann bei einem hover die Farbe wechseln. So müssen die Benutzerdas Einfärben nicht selber machen.

Geht das überhaupt? Oder hab ich das mit der mask da falsch verstanden?

<img src="URL-zum-vollflächigen-Bild" class="masked">

.masked{
mask-image:url(URL-zum-weiß/transparent-Icon);
}

Hat jemand eine Idee?
Prenzlberger ist offline   Mit Zitat antworten