Mit HTML die Farbe eines Bildes ändern?
Hallo!
Ich habe eine .png Datei die nur aus transparenten und schwarzen Flächen besteht:
Ist es möglich mit HTML wenn z. B. einer mit der Maus drüber fährt (:hover) das sich der schwarze Teil im Bild zu blau ändert?
4 Antworten
Nein, sofern du es nicht beim Hover austauscht mit einem Bild, das blau statt schwarz beinhaltet.
Du könntest natürlich die Grafik umdrehen und z.B. einen weißen Hintergrund wählen und den nun schwarzen Anteil transparent gestalten, dann setzt du auf der Website hinter diesen Element die Hintergrundfarbe, um die Pfeile einzufärben.
Das setzt natürlich voraus, dass das Symbol auf einen einfarbigen Hintergrund angezeigt wird.
Ansonsten müsste man das eher in SVG überführen, da hast du dann nur die Pfeile mit einer entsprechenden Farbe, wie es auch die ganzen Web-Fonts machen, die für Icons verwendet werden wie FontAwesome. Dort gibt es z.B. genau dieses Symbol ebenso:
https://fontawesome.com/icons/expand-arrows-alt?style=solid
Das wird dann z.B. über die font-color eingefärbt und via font-size skaliert.
Edit: Mea Culpa, mal bei RiscV schauen, das wäre ein Weg wie du es mit deiner aktuellen Grafik lösen könntest. Ist dann eben eine Kombination aus mehreren Filtern, die eine bestimmte Farbe erzeugen würden, sprich vermutlich sepia + hue-rotate, ggf. noch was zusätzliches. Kannst es aber erstmal nicht im normalen CSS angeben mit einem RGB-Wert, wobei sowas natürlich mit SCSS/SASS auch wieder möglich wäre. Alternativ muss man die gewünschten Werte vorher ausrechnen.
Du meinst mit CSS.
Ja, das ist möglich. Zum Beispiel mit einem Filter:
#arrows:hover {
filter: invert(8%) sepia(97%) saturate(7245%) hue-rotate(247deg) brightness(98%) contrast(144%)
}
Das färbt die Schwarzen Pfeile blau, wenn du drüber hoverst.
Den Filter-Code für eine bestimmte Farbe kannst du hier generieren lassen: https://codepen.io/sosuke/pen/Pjoqqp
Was ich dir jedoch empfehlen würde:
Öffne ein Bildbearbeitungsprogramm, ändere das Schwarz zu transparent, und ändere die transparente Fläche zu weiß.
Dann kannst du per CSS die Schwarze Fläche färben, indem du einfach die Hintergrundfarbe (background-color: ) des Bildes änderst.
Das ist sehr leicht mit einem CSS Brightnessfilter möglich:
Interessanter Ansatz, wobei man dann vermutlich erstmal einen Rechner brauch, der einen die gewünschte Zielfarbe erstellt, ist ja letztlich eine Kombination aus verschiedenen Filtern, sofern es eine konkrete Farbe sein soll.
Hi!
Nein, das geht nicht. Was man aber machen kann, ist das Bild in Blau umfärben und dann austauschen. was auch geht, wäre es zum Beispiel ein wenig größer werden zu lassen.
LG,
NiZ112