Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)

1. Vorschau des Farbabstimmungseffekts

Wie im GIF unten zu sehen, ändert sich beim allmählichen Verblassen der Hintergrundfarbe unseres Buttons auch die Textfarbe von Weiß zu Schwarz und der Rahmen wird ebenfalls angezeigt. Die Farbkonvertierung wird rein mit CSS erreicht.

Sie können hier klicken: Schaltflächentext und Rahmenfarbe ändern sich automatisch mit der Hintergrundfarbe Demo

Ziehen Sie die entsprechenden Schieberegler R, G und B, um zu sehen, dass sich die Textfarbe und die Rahmenfarbe der Schaltfläche automatisch entsprechend der Hintergrundfarbe ändern. Die spezifischen Erscheinungsformen sind:

• Auf dunklem Hintergrund ist der Text weiß und hat keinen Rand.
• Auf hellem Hintergrund ist der Text schwarz mit einem dunklen Rand, um ihn leichter von der Umgebung unterscheiden zu können.

Dieses intelligente Matching wird in reinem CSS implementiert, hauptsächlich unter Verwendung von CSS3-calc()-Berechnungen und nativen CSS3-Variablen.

2. Farbcode-Anzeige

Der HTML-Code ist sehr einfach und sieht wie folgt aus:

<button class="btn">Ich bin ein Knopf</button>

Die wesentlichen Punkte und Schwierigkeiten liegen im CSS-Teil:

:Wurzel {
  /* RGB-Variablen definieren */
  --rot: 44;
  --grün: 135;
  --blau: 255;
  /* Der kritische Wert für die Textfarbänderung, 0,5 bis 0,6, wird empfohlen */
  --Schwellenwert: 0,5;
  /* Der Schwellenwert für das Erscheinen des dunklen Randes liegt zwischen 0 und 1, empfohlen wird 0,8+*/
  --Randschwelle: 0,8;
}

.btn {
  /* Die Hintergrundfarbe der Schaltfläche ist die grundlegende Hintergrundfarbe*/
  Hintergrund: rgb(var(--rot), var(--grün), var(--blau));

  /** 
   * Verwenden Sie die sRGB-Luma-Methode, um Graustufen zu berechnen (kann als Helligkeit angesehen werden).
   * Der Algorithmus ist:
   * Helligkeit = (Rot * 0,2126 + Grün * 0,7152 + Blau * 0,0722) / 255
  */
  --r: Berechnung(var(--red) * 0,2126);
  --g: Berechnung(var(--green) * 0,7152);
  --b: Berechnung(var(--blue) * 0,0722);
  --Summe: berechnet(var(--r) + var(--g) + var(--b));
  --Helligkeit: calc(var(--sum) / 255);
  
  /* Farbe festlegen */
  Farbe: hsl(0, 0 %, calc((var(--Helligkeit) - var(--Schwellenwert)) * -999999 %));
 
  /* Bestimmen Sie die Transparenz der Ränder */
  --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
  /* Rahmenbezogene Stile festlegen */
  Rand: .2em durchgezogen;
  Rahmenfarbe: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
}

Auf den ersten Blick ist es wie eine Ente, die Donner hört – ich verstehe nicht, was das bedeutet. Tatsächlich ist es nicht kompliziert. Lassen Sie mich das Implementierungsprinzip analysieren.

3. Prinzip der automatischen Farbanpassung von Vordergrund und Hintergrund

1. Funktion zum Rendern von Überlaufgrenzen für CSS-Eigenschaftswertebereiche

Die CSS-Sprache verfügt über eine interessante Funktion: Wenn der CSS-Eigenschaftswert den normalen Bereich überschreitet, wird er gerendert, solange das Format korrekt ist und der gerenderte Wert dem zulässigen Grenzwert entspricht.

Hier sind zwei Beispiele:

Der gültige Wertebereich des Opazitätstransparenz-Attributs liegt zwischen 0 und 1. Wenn Sie jedoch eine negative Zahl oder einen sehr großen Wert festlegen, kann der Browser ihn zwar immer noch interpretieren, er wird jedoch entweder 0 oder 1 sein, und zwar wie folgt:

.Beispiel {
  Deckkraft: -2; /* wird zu 0 aufgelöst, komplett transparent*/
  Opazität: -1; /* wird zu 0 aufgelöst, komplett transparent*/
  Deckkraft: 2; /* Wird als 1 analysiert, völlig undurchsichtig*/
  Deckkraft: 100; /* Wird als 1 analysiert, völlig undurchsichtig*/
}

Farbwerte wie HSL, S und L reichen von 0 % bis 100 %. Wenn Sie jedoch eine negative Zahl oder einen Maximalwert festlegen, kann der Browser diesen zwar immer noch interpretieren, aber er wird entweder 0 % oder 100 % betragen, wie unten dargestellt:

.Beispiel {
  Farbe: hsl(0, 0%, -100%); /* Wird als hsl(0, 0%, 0%), schwarz analysiert*/
  Farbe: hsl(0, 0%, 200%); /* Wird als hsl(0, 0%, 100%), weiß analysiert*/
}

Die Farbabgleichtechnik in diesem Artikel macht sich diese Funktion der Randdarstellung zunutze.

2. var-Variablen werden an calc übergeben, um komplexe Berechnungen durchzuführen

Lassen Sie uns den CSS-Code von oben nach unten analysieren.

Definieren Sie zunächst einige globale CSS-Variablen im :root-Selektor (semantisch global):

:Wurzel {
  --rot: 44;
  --grün: 135;
  --blau: 255;

  --Schwellenwert: 0,5;
  --Randschwelle: 0,8;
}

In:

-Schwelle
Dies ist der Farbänderungsschwellenwert, der zum Vergleichen der Helligkeit des aktuellen RGB-Farbwerts verwendet wird.
--border-threshold
Dies ist der kritische Wert der Rahmenfarbtransparenz, der gleichzeitig der Helligkeitsvergleich mit dem aktuellen RGB-Farbwert ist.
Dann der CSS-Code innerhalb von .btn{}:

Hintergrund: rgb(var(--rot), var(--grün), var(--blau));

Dies ist leicht zu verstehen, der grundlegende RGB-Farbwert wird als Hintergrundfarbe verwendet.

--r: Berechnung(var(--red) * 0,2126);
--g: Berechnung(var(--green) * 0,7152);
--b: Berechnung(var(--blue) * 0,0722);
--Summe: Berechnung(var(--r) + var(--g) + var(--b));
--Helligkeit: calc(var(--sum) / 255);

Hier gibt es 5 CSS-Variablen in 5 Zeilen. Die, die wir brauchen, ist eigentlich die letzte - lightness, also die Helligkeit der aktuellen Hintergrundfarbe zu berechnen. Es wird der sRGB Luma-Graustufenalgorithmus ① verwendet. Warum brauchen wir 5 Zeilen? Denn die Berechnungsformel lautet:

Helligkeit = (Rot * 0,2126 + Grün * 0,7152 + Blau * 0,0722) / 255

Unter diesen sind die Koeffizienten zum Multiplizieren der R-, G- und B-Farbwerte fest und die Koeffizienten für verschiedene Graustufenalgorithmen sind unterschiedlich. --lightness gibt die Helligkeit im Bereich von 0 bis 1 an. Zu diesem Zeitpunkt kann es mit den beiden kritischen Werten von --threshold und --border-threshold verglichen werden, um die Textfarbe und die Rahmentransparenz der Schaltfläche zu bestimmen.

① Die Graustufen können hier als Helligkeit betrachtet werden. Tatsächlich sollte die Helligkeitsberechnungsmethode von HSL die Hälfte der Summe der maximalen und minimalen Farbwerte von R, G und B sein.

Farbe: hsl(0, 0 %, calc((var(--Helligkeit) - var(--Schwellenwert)) * -999999 %))

Der CSS-Code zum Einstellen der Farbe.

Die Berechnung wird hier ins Chinesische wie folgt übersetzt: (Helligkeitswert – kritischer Wert) * Proportionalitätskoeffizient.

Der Helligkeitswert liegt zwischen 0 und 1 und der kritische Wert ist auf 0,5 festgelegt, also:

Wenn der Helligkeitswert kleiner als 0,5 ist, ist der Helligkeitswert abzüglich des kritischen Wertes negativ. Da unser Proportionalitätskoeffizient eine sehr große negative Zahl ist, ergibt negativ mal negativ positiv, sodass wir eine riesige positive Zahl erhalten. Gemäß dem Boundary-Rendering-Prinzip wird es mit 100 % gerendert, sodass die Farbe weiß ist.
Wenn der Helligkeitswert größer als 0,5 ist, ist der Helligkeitswert abzüglich des kritischen Wertes positiv. Da unser Proportionalitätskoeffizient eine sehr große negative Zahl ist, erhalten wir eine riesige negative Zahl. Gemäß dem Boundary-Rendering-Prinzip wird sie mit 0 % gerendert, sodass die Farbe schwarz ist.
Oben ist das Prinzip der Änderung der Textfarbe der Schaltfläche zu Schwarz auf einem Farbwechselhintergrund und zu Weiß auf einem dunklen Hintergrund dargestellt.

--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);

Grenztransparenz funktioniert nach einem ähnlichen Prinzip. Die Berechnung wird hier ins Chinesische wie folgt übersetzt: (Helligkeitswert – Grenzschwelle) * 100.

Der Helligkeitswert liegt zwischen 0 und 1 und der Grenzwert ist auf 0,8 festgelegt, also:

Wenn der Helligkeitswert kleiner als 0,8 ist, ist der Helligkeitswert abzüglich des Randschwellenwerts negativ. In CSS wird negative Transparenz als 0 gerendert und der Rand ist vollständig transparent.

Wenn der Helligkeitswert größer als 0,8 ist, ist der Helligkeitswert abzüglich des Randschwellenwerts positiv und der berechnete Transparenzwert liegt zwischen 0 und 20. Natürlich werden Transparenzwerte größer als 1 als 1 gerendert. Zu diesem Zeitpunkt ist der Rand grundsätzlich vollständig undurchsichtig und der dunkle Rand wird angezeigt.

Rand: .2em durchgezogen;
Rahmenfarbe: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));

Legen Sie den Rahmenstil fest. Die Rahmenfarbe ist 50 Einheiten dunkler als die Hintergrundfarbe (negative Zahlen werden als 0 wiedergegeben). Anschließend wird die Transparenz dynamisch basierend auf der Helligkeit berechnet. Bei dunklem Hintergrund beträgt die Transparenz des Schaltflächenrahmens 0 und wird nicht angezeigt; bei hellem Hintergrund liegt die Transparenz zwischen 0 und 1 und wird angezeigt. Je heller die Farbe, desto größer die Rahmentransparenz und desto dunkler die Rahmenfarbe, was den Erwartungen hinsichtlich der Farbübereinstimmung entspricht.

Ich glaube, dass nach der obigen Analyse jeder das Prinzip der Umsetzung verstehen wird.

Ändern der Hintergrundfarbe einer Schaltfläche

Der CSS-Code unter dem Klassennamen .btn ist festgelegt. Wenn wir die Farbe der Schaltfläche ändern müssen, ändern wir nicht das CSS unter .btn, sondern ändern die folgenden drei Variablenwerte in :root:

--rot: 44;
--grün: 135;
--blau: 255;

CSS-Einstellungen ändern den Wert direkt. Wenn er von JS festgelegt wird, verwenden Sie die Methode setProperty(). Wenn Sie es nicht verstehen, können Sie diesen Artikel lesen: „So legen Sie CSS3-Variablen in HTML-Tags und JS fest“.

IV. Schlussbemerkungen

Aufgrund der Kompatibilitätsbeschränkungen von var ist diese sehr interessante CSS-Technik noch nicht für die Verwendung in großen externen Projekten geeignet.

Sie können das Applet ausprobieren, da die Kernelumgebung relativ fest ist. Man kann mit dem internen System und experimentellen Projekten spielen, das wird sehr interessant sein.

Diese Farbanpassungstechnik kann eigentlich nicht nur auf Schaltflächen, sondern auch im Layout einiger großer Bereiche verwendet werden, da die Hintergrundfarbe dieser Layouts dynamisch sein kann. Zu diesem Zeitpunkt kann die Farbanpassung des Textes auch mithilfe von CSS automatisiert werden.

Darüber hinaus ist der Schaltflächentext in der Demo dieses Artikels schwarzweiß. Wenn unser Multiplikationskoeffizient kleiner ist, können tatsächlich mehr Farbwerte erscheinen und die Farbanpassung wird verfeinert.

Verweise

Schriftfarbe ändern … CSS

Zusammenfassen

Das Obige ist eine kurze Einführung in die vom Editor eingeführte CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!