Was ist RGBA in CSS3?

rgba ist eine Funktion, die Farbe in CSS3 definiert. Die Syntax lautet „rgba(R,G,B,A)“, was Rot (R), Grün (G), Blau (B) und Transparenz (A) darstellt. Ändern und überlagern Sie einander, um eine Vielzahl von Farben zu erhalten. Der Wertebereich der Parameter R, G und B beträgt „0 bis 255“ und der Wertebereich von A beträgt „0 bis 1“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

RGB ist ein Farbstandard, bei dem es sich um eine Vielzahl von Farben handelt, die durch Änderungen und Überlagerung von Rot (R), Grün (G) und Blau (B) entstehen. RGBA basiert auf RGB und fügt Parameter zur Steuerung der Alpha-Transparenz hinzu.

Syntax:

rgba(R,G,B,A)

Parameter:

　R: roter Wert. Positive ganze Zahl |. Prozent

　G: Grüner Wert. Positive ganze Zahl |. Prozent

　B: Blauer Wert. Positive ganze Zahl |. Prozentsatz

　A: Transparenz. Der Wert liegt zwischen 0 und 1

Wertebereich:

　　: Hue (Farbton). 0 (oder 360) steht für Rot, 120 steht für Grün und 240 steht für Blau. Natürlich können auch andere Werte verwendet werden, um andere Farben zu bestimmen

　　; Der Wert ist ein Wert zwischen 0 % und 100 %;

　: Helligkeit (Helligkeit). Der Wert liegt zwischen 0 % und 100 %;

　 Der Wert liegt zwischen 0 und 1;

Einfache Erklärung:

　 Der RGB-Farbmodus (auch übersetzt als „Rot, Grün und Blau“, seltener verwendet) ist ein Farbstandard in der Branche, der auf Rot basiert ( R), Grün (G) und Blau (B) und deren Überlagerung, um eine Vielzahl von Farben zu erhalten. RGB stellt die Farbe der drei Kanäle Rot, Grün und Blau dar. Dieser Standard umfasst fast alle Farben, die möglich sind vom menschlichen Auge wahrgenommen werden und ist derzeit eines der am weitesten verbreiteten Farbsysteme.

　RGBA verfügt über zusätzliche Parameter zur Steuerung der Alpha-Transparenz basierend auf RGB. Für die oben genannten drei Parameter R, G und B beträgt der positive ganzzahlige Wertebereich: 0–255. Der Wertebereich des Prozentwerts beträgt: 0,0 % - 100,0 %. Werte außerhalb des Bereichs werden auf die nächste Wertegrenze gerundet. Nicht alle Browser unterstützen die Verwendung von Prozentwerten. Ein Parameter hat einen Wert zwischen 0 und 1 und darf nicht negativ sein.

Browserkompatibilität:

Wenn Pang Tong sagte, dass RGBA zum Erstellen transparenter Farben (transparente Hintergrundfarbe, transparente Randfarbe, transparente Vordergrundfarbe usw.) verwendet wird, muss jeder an Deckkraft denken. Es wird normalerweise zum Erstellen der Hintergrundfarbe in unserem CSS2 verwendet. Wenn Sie es jedoch zum Erstellen der Rahmenfarbe oder der Vordergrundfarbe verwenden möchten, kann es nur an der Seite stehen und ist machtlos.

Schauen wir uns nun ein Vergleichsbeispiel zwischen RGBA und Opacity an:

<div class="example-opacity">
  <p>Opacity效果</p>
  <ul>
   <li class="opacity opacity1">100%</li>
   <li class="opacity opacity2">80%</li>
   <li class="opacity opacity3">60%</li>
   <li class="opacity opacity4">40%</li>
   <li class="opacity opacity5">20%</li>
   <li class="opacity opacity6">0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li class="rgba rgba1">1</li>
   <li class="rgba rgba2">0.8</li>
   <li class="rgba rgba3">0.6</li>
   <li class="rgba rgba4">0.4</li>
   <li class="rgba rgba5">0.2</li>
   <li class="rgba rgba6">0</li>
 </ul>
</div>

Wir wenden relevante Stile auf die li in diesen beiden uls an, ich verwende Opacity in CSS2 und in li In. rgba verwenden wir das neue RGBA-Attribut von CSS3.

Deckkraftstil

li.opacity{
  float: left;
  width: 50px;
  height: 50px;
}
li.opacity1 {
   background: rgb(255,255,0);
   opacity: 1;
   filter:alpha(opaity=100);
}
li.opacity2 {
  background: rgb(255,255,0);
  opacity: 0.8;
  filter:alpha(opaity=80);
}
li.opacity3 {
  background: rgb(255,255,0);
  opacity: 0.6;
  filter:alpha(opaity=60);
}
li.opacity4 {
  background: rgb(255,255,0);
  opacity: 0.4;
  filter:alpha(opaity=40);
}
li.opacity5 {
  background: rgb(255,255,0);
  opacity: 0.2;
  filter:alpha(opaity=20);
}
li.opacity6 {
  background: rgb(255,255,0);
  opacity: 0;
  filter:alpha(opaity=0);
}

RGBA-Beispiel:

li.rgba {
  float: left;
  width: 50px;
  height: 50px;
}
li.rgba1 {
  background: rgba(255,255,0,1);
}
li.rgba2 {
  background: rgba(255,255,0,0.8);
}
li.rgba3 {
  background: rgba(255,255,0,0.6);
}
li.rgba4 {
  background: rgba(255,255,0,0.4);
}
li.rgba5 {
  background: rgba(255,255,0,0.2);
}
li.rgba6 {
  background: rgba(255,255,0,0);
}

Werfen wir einen Blick auf den Effekt:

Anhand des Effekts können wir erkennen, dass das Einzige, was sie gemeinsam haben, darin besteht, dass die Hintergrundfarbe genau gleich ist. Aber der Unterschied besteht darin, dass jeder immer das Problem hat, das mir Kopfschmerzen bereitet, weil die Nachkommenelemente von Opacity gleichzeitig Transparenz haben, sodass die Wörter in unserer Opacity mit abnehmendem Transparenzwert immer unklarer werden, RGBA jedoch nicht so ein Problem.

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWas ist RGBA in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!