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!