Klingt irgendwie nach einem schwierigen Problem, oder? Wir haben oft keine Produktaufnahmen in Tausenden von Farben, so dass wir das `<img src="product-red.jpg" alt="rotes Produkt">` durch `<img src="product-blue.jpg" alt="blaues Produkt">` austauschen können. Noch haben wir Produkte normalerweise nicht in einem Vektorformat, so dass wir SVG-`fill`-Eigenschaften darauf anwenden können.
Es gibt jedoch eine clevere Methode, dies auch dann zu tun, wenn Ihre Produktaufnahmen Bitmap-Grafikdateien wie JPG oder PNG sind. Kyle Wetton demonstriert, und es ist im Wesentlichen
- Erstellen Sie einen Vektorpfad, der den Bereich auf dem JPG abdeckt, der seine Farbe ändern soll (wahrscheinlich in Photoshop mit dem Zeichenstift-Werkzeug und Exportieren des Vektors).
- Platzieren Sie diesen einfarbigen Vektorbereich genau über dem Produkt-JPG.
- Mischen Sie das SVG mit `mix-blend-mode: multiply;`.
- Ändern Sie die Füllfarbe des SVG nach Wunsch.
Hier ist die supercoole Demo, von der ich glaube, dass sie ursprünglich stammt
Siehe den Stift
Farbe dieses Sofa! – SVG + Blend-Mode-Trick von Kyle Wetton (@kylewetton)
auf CodePen.
Und die Demo aus dem Artikel
Siehe den Stift
Dynamisches Farbauswahl – Teil 3
auf CodePen.
Es ist erwähnenswert, dass dies nur funktioniert, wenn das Basisbild weiß ist. Wenn Ihr Basisprodukt beispielsweise blau ist, multiplizieren Sie Ihre Farben mit Blau und die Ergebnisse werden nicht wie erwartet ausfallen. Das gesagt, ist dies eine großartige Technik, wenn Sie die richtigen Quelldateien zur Verfügung haben. Es funktioniert offensichtlich auch nicht in einem Browser, der keine Mischmodi unterstützt.
Warum nicht die Bildfarbe selbst mit Farbton drehen?
filter: hue-rotate(90deg);
Farbton drehen berücksichtigt keine Helligkeit oder Sättigung, diese Methode kann jeden HEX-Wert verarbeiten. Außerdem würden Sie beim T-Shirt-Demo seine Haut und den Hintergrund mitdrehen
Danke Chris! Beide Demos sind von mir, die CodePen-Demo kam zuerst. Vielen Dank für den Bericht
Und mit der CodePen-Demo meine ich die Couch-Demo!