Verwenden Sie CSS-Mischmodi und SVG, um die Farbe Ihrer Produktbilder dynamisch zu ändern

Verwenden Sie CSS-Mischmodi und SVG, um die Farbe Ihrer Produktbilder dynamisch zu ändern

Vor ein paar Tagen habe ich auf Codepen ein Beispiel von @Kyle Wetton gesehen, bei dem CSS-Mischmodi und SVG verwendet wurden, um die Farbe des Sofas zu ändern. Ein sehr interessanter Fall. Dies erinnert mich an die Anwendung in einigen tatsächlichen Geschäftsszenarien. Beispielsweise gibt es ähnliche Szenarien in einigen Beauty-Anwendungen. Möchten Sie mehr darüber erfahren, wie Sie diesen Effekt erzielen? Wenn ja, dann lesen Sie bitte weiter.

Verwenden von CSS-Mischmodi und SVG zum Ändern der Farbe des Sofas

Die folgende Demo stammt von einem Effekt, der von @Kyle Wetton auf Codepen geschrieben wurde:

Versuchen Sie, die Farbe zu ändern, und Sie werden verschiedene Sofafarben sehen:

Ist das nicht interessant?

Tatsächlich gibt es in tatsächlichen Szenen einige ähnliche Effekte, beispielsweise bei einigen Schönheitsanwendungen:

Wenn Sie das Umsetzungsprinzip oder die Wirkung erfahren möchten, lesen Sie bitte weiter.

Grundkenntnisse, die Sie benötigen

Wenn Sie die Effekte der oben genannten Beispiele erfolgreich umsetzen möchten, müssen Sie über ein wenig Grundwissen verfügen. Beispielsweise CSS-Mischmodus, SVG und so weiter.

Mithilfe verschiedener Eigenschaftswerte von CSS-Blend-Modi können wir die Wirkung eines Bildes ganz einfach ändern:

Der CSS-Mischmodus kann auch viele andere Effekte erzielen, auf die hier nicht näher eingegangen wird.

Darüber hinaus müssen Sie über Kenntnisse im Ausschneiden von Bildern verfügen. Ich denke aber, dass das für das Frontend kein Problem sein sollte.

So lässt sich das Sofa neu beziehen

Lassen Sie uns dies als Nächstes in die Praxis umsetzen und zuerst den Fall von @Kyle Wetton analysieren. Dieses Beispiel ist sehr einfach. Das HTML besteht aus drei Teilen:

  • Es gibt eine Menge SVG-Code, der dicht und dicht aussieht. Für Schüler, die SVG nicht kennen, wird es definitiv ein Gefühl der Angst hervorrufen (Liebling, keine Panik)
  • Es gibt ein Bild
  • Es gibt mehrere Steuerelemente, mit denen der Benutzer eine Farbe auswählen kann

Lassen Sie uns diesen SVG-Code kurz analysieren.

<svg id="js-couch" class="couch__overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="keine" width="1000" height="394">
    <Definitionen>
        <Pfad d="M996.35 77.55q-1.85-1.95-8.65-3.75l-62.4-17.1q-9.3-2.75-12.15-2.5-1.8.15-2

Zusammenfassen

Oben habe ich Ihnen die Verwendung von CSS-Mischmodi und SVG zur dynamischen Änderung der Farbe von Produktbildern vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<:  So legen Sie den Rahmen einer Webseitentabelle fest

>>:  Hintergrundbild-Cache unter IE6

Artikel empfehlen

VMware Workstation ist nicht mit Device/Credential Guard kompatibel

Beim Installieren einer virtuellen Maschine wird ...

HTML-Framework_Powernode Java Academy

1. Rahmen In einem Browser-Dokumentfenster kann n...

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

Kennen Sie den Unterschied zwischen leerem Wert und Nullwert in MySQL

Vorwort Kürzlich habe ich festgestellt, dass die ...

Detaillierte Erklärung des JavaScript-Fortschrittsmanagements

Inhaltsverzeichnis Vorwort Frage Prinzip prüfen V...

So veröffentlichen Sie statische Ressourcen in Nginx

Schritt Platzieren Sie die vorbereiteten statisch...

Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver

Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...

Beispielcode zum automatischen Umbrechen des Pre-Tags

Das Pre-Element definiert vorformatierten Text. In...

Ein Artikel zum Verständnis von MySQL Index Pushdown (ICP)

Inhaltsverzeichnis 1. Einleitung 2. Grundsatz Pra...

So zeigen Sie den Datenbankinstallationspfad in MySQL an

Wir können den Installationspfad von MySQL über d...

MySQL-Löschfunktion für Mehrfachtabellenverbindungen

Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...