Wie kann man die Farbe einer image/png;base64 Grafik in CSS ändern?

Um die Farbe einer PNG-Grafik, die im Base64-Format vorliegt, in CSS zu ändern, gibt es einige Ansätze, die du verwenden kannst:

1. **Filter-Eigenschaft**: Du kannst die CSS `filter`-Eigenschaft verwenden, um die Farbe zu ändern. Zum Beispiel kannst du die `hue-rotate`-Funktion nutzen, um den Farbton zu ändern:

```css
.image {
filter: hue-rotate(90deg); /* Ändert den Farbton */
}
```

2. **SVG-Filter**: Wenn du die PNG-Grafik in ein SVG-Element umwandelst, kannst du die Farbe direkt im SVG ändern. Hier ist ein Beispiel, wie du ein SVG mit einer eingebetteten PNG verwenden kannst:

```html
<svg width="100" height="100">
<defs>
<filter id="colorFilter">
<feColorMatrix type="matrix" values="0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
0 0 0 0.5 1" />
</filter>
</defs>
<image href="data:image/png;base64,...deinBase64String..." filter="url(#colorFilter)" />
</svg>
```

3. **CSS Masking**: Eine andere Möglichkeit ist, die PNG-Grafik als Maske zu verwenden und eine Hintergrundfarbe zu setzen:

```css
.image {
background-color: red; /* Die gewünschte Farbe */
-webkit-mask-image: url('data:image/png;base64,...deinBase64String...');
mask-image: url('data:image/png;base64,...deinBase64String...');
mask-size: cover;
width: 100px; /* Breite der Grafik */
height: 100px; /* Höhe der Grafik */
}
```

Diese Methoden ermöglichen es dir, die Farbe einer PNG-Grafik in CSS zu ändern, ohne die ursprüngliche Datei zu bearbeiten.