Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)

Hintergrund

Alles begann, als ein Klassenkamerad in der technischen WeChat-Gruppe fragte: „Gibt es eine Möglichkeit, die Hauptfarbe eines Bildes zu erhalten?“ Es gibt ein Bild, holen Sie sich seine Hauptfarbe:

Verwenden Sie den erhaltenen Farbwert, um eine Funktion wie diese zu implementieren – im Container befindet sich ein Bild und Sie möchten, dass die Hintergrundfarbe mit der Hauptfarbe des Bildes übereinstimmt, wie folgt:

Jeder machte Vorschläge. Einige schlugen vor, Canvas für Berechnungen zu verwenden, während andere spezielle Open-Source-Bibliotheken empfahlen. Beide waren gut.

Kann diese Funktion also mit CSS erreicht werden?

Das klingt wie ein Wunschtraum. Kann CSS diesen Effekt erzielen? Emm, mit CSS kann man tatsächlich auf ansprechende Weise die ungefähre Hauptfarbe des Bildes erhalten. Wenn die Anforderungen an die Hauptfarbe nicht besonders präzise sind, ist dies eine gute Methode. Schauen wir es uns gemeinsam an.

Verwenden Sie filter: blur() und transform: sacle(), um die Themenfarbe des Bildes zu erhalten

Hier verwenden wir den Unschärfefilter und den Vergrößerungseffekt, um die ungefähre Themenfarbe des Bildes zu erhalten.

Nehmen wir an, wir haben ein Bild wie dieses:

<div></div>

Wenden Sie einen Weichzeichnerfilter auf das Bild an:

div {
    Hintergrund: URL("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    Hintergrundgröße: Abdeckung;
    Filter: Unschärfe (50px);
}

Schauen wir uns den Effekt an. Wir verwenden einen relativ großen Weichzeichnerfilter blur(50px) . Das unscharfe Bild vermittelt ein wenig dieses Gefühl, aber es gibt einige unscharfe Kanten. Versuchen Sie, es mit overflow zuzuschneiden.

Als nächstes müssen wir die unscharfen Kanten entfernen und den Effekt durch transform: scale() verstärken, um die Farbe wieder zu fokussieren. Wir können den Code leicht ändern:

div {
    Position: relativ;
    Breite: 320px;
    Höhe: 200px;
    Überlauf: versteckt;
}

div::vor {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 0;
    rechts: 0;
    unten: 0;
    Hintergrund: URL("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    Hintergrundgröße: Abdeckung;
    // Kerncode:
    Filter: Unschärfe (50px);
    transformieren: Skalierung(3);
}

Die Ergebnisse sind wie folgt:

Auf diese Weise verwenden wir CSS, um die Hauptfarbe des Bildes zu erhalten, und der Effekt ist ziemlich gut!

Den vollständigen Code finden Sie hier: CodePen Demo -- Holen Sie sich die Hauptfarbe des Bildes durch Filter und Skalierung

Nachteile

Natürlich bringt auch diese Lösung einige kleinere Probleme mit sich:

Sie können die Hauptfarbe des Bildes nur grob und nicht sehr genau erhalten, und die 50px filter: blur(50px) müssen etwas debuggt werden. Der Unschärfefilter selbst verbraucht Leistung. Wenn eine Seite mehrere Hintergründe hat, die mit dieser Methode erhalten werden, kann dies gewisse Auswirkungen auf die Leistung haben. Bei der tatsächlichen Verwendung müssen Sie bestimmte Kompromisse eingehen.

endlich

Nun, dieser Artikel endet hier. Ich habe einen Trick vorgestellt, um die Themenfarbe des Bildes mithilfe von CSS zu erhalten. Ich hoffe, er wird Ihnen hilfreich sein 😃

Vielen Dank an XboxYan, einen Studenten aus Yuewen, der diese Methode vorgeschlagen hat. Die iCSS WeChat-Gruppe ist sehr aktiv und hat eine Menge CSS-Experten versammelt. Studenten, die der Gruppe beitreten möchten, um über Technologie zu diskutieren, können meine WeChat-Coco1s hinzufügen (da die Gruppe mehr als 200 Personen hat, können Sie den Code nicht scannen, um der Gruppe beizutreten, Sie können nur einladen).

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Dies ist das Ende dieses Artikels über das Parsen von CSS und das Extrahieren von Bilddesignfarben. Weitere relevante CSS-Extraktionen von Bilddesignfarben finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!