Detaillierte Erklärung zur Verwendung von CSS3 RGB und RGBA (transparente Farbe)

Ich glaube, jeder Mensch ist sehr sensibel für Farben. Farben gibt es überall, wo unsere Augen hinsehen. Was verwenden wir also, um Farben in CSS darzustellen? Es gibt drei Möglichkeiten, Farben in CSS zu definieren: mithilfe von Farbmethoden (RGB, RGBA, HSL, HSLA), hexadezimalen Farbwerten und vordefinierten Farbnamen. Wir verwenden häufig RGB und RGBA. Sprechen wir also über die Unterschiede zwischen ihnen!

Die Bedeutung von RGB und RGBA

RGB ist die Abkürzung für Rot, Grün und Blau. RGBA -Farbwerte sind eine Erweiterung der RGB-Farbwerte um einen Alphakanal, der die Deckkraft des Objekts angibt.

1. Grundlegende Syntax:
R: Rotwert. Positive Ganzzahl (0–255) oder Prozentsatz (0,0 % – 100,0 %)
G: Grüner Wert. Positive Ganzzahl (0–255) oder Prozentsatz (0,0 % – 100,0 %)
B: Blauwert. Positive Ganzzahl (0–255) oder Prozentsatz (0,0 % – 100,0 %)
A: Transparenz. Der Wert liegt zwischen 0 und 1 und darf nicht negativ sein.

Informationen zur Suche nach RGB-Farbwerten finden Sie unter: https://www.sioe.cn/yingyong/yanse-rgb-16/ (Hexadezimalzahlen können auch zur Darstellung verschiedener Farben in CSS verwendet werden, und die Hexadezimalwerte verschiedener Farben finden Sie auch auf dieser Website).

2. Browserkompatibilität:

RGB-kompatibel:

RGBA-kompatibel:

http://caniuse.com/ Auf dieser Website können Sie nach Browserkompatibilitätsproblemen bei den Attributen suchen, die Sie verwenden möchten.

3. Schreibformat von RGB und RGBA

Das Schreibformat von RGB: rgb(90,50,25);

In Die erste Zahl (90) steht für die Farbe Rot ( den Rotwert ), Die zweite Zahl (50) steht für die Farbe Grün ( Grünwert ), Die dritte Zahl (25) steht für die Farbe Blau ( Blauwert ). Je größer die Zahl (nicht über 255), desto mehr entsprechende Farben werden hinzugefügt.

Das Schreibformat von rgba: rgba(90,50,25,0,5);

Aus dem Obigen können wir erkennen, dass der RGBA -Farbwert eine Erweiterung des RGB-Farbwerts ist, bei der ein Alphakanal hinzugefügt wird, der die Deckkraft des Objekts angibt. Die ersten drei Werte sind dieselben wie die durch RGB dargestellten. Der Wert von a liegt zwischen 0 und 1, 0 steht für transparente Farbe, 1 steht für undurchsichtig und 0,5 steht für 50 % Transparenz jeder (R, G, B) Farbe, d. h. jede Farbe ist halbtransparent. Das a kann hier auch zu .5 abgekürzt werden. Sofern eine Dezimaltransparenz vorhanden ist, kann auf diese Weise abgekürzt werden.

Der Unterschied zwischen RGB und RGBA

1. RGB+Deckkraft (nicht mit IE kompatibel)
Da das „a“ in „rgba“ die Transparenz des Objekts darstellt, wird hier das Opazitätsattribut (stellt auch Transparenz dar) + „rgb“ verwendet, um den Unterschied zwischen „rgb“ und „rgba“ zu veranschaulichen. Das Opazitätsattribut kann auch mithilfe des Filterattributs ausgedrückt werden, zum Beispiel: filter:Alpha(opacity=50), wobei 50 50 % Transparenz darstellt. Hier sind einige Beispiele:

<div Klasse="Box">
	<p>RGB+Deckkraft:</p>
	<div class='one'>25 %</div>
	<div Klasse = 'two'>50 %</div>
	<div Klasse = 'drei'>75 %</div>
	<div Klasse = 'four'>100 %</div>
</div>

.Kasten{
	Rand unten: 10px;
	Überlauf: versteckt;	
}
.box>div{
	Breite: 100px;
	Höhe: 100px;
	schweben: links;
}
.box>div{
	Hintergrund: RGB (255,0,0)
}
.box>.eins{
	Deckkraft: 0,25;
}
.box>.zwei{
	Deckkraft: 0,5;
}
.box>.drei{
	Deckkraft: 0,75;
}
.box>.vier{
	Deckkraft: 1
} 

Aus dem obigen Beispiel können wir erkennen, dass mit der Änderung der Transparenz das Div transparent wird und der Text auf dem Div ebenfalls transparent und zunehmend undurchsichtiger wird.

2. RGBA

Da das „a“ in RGBA die Transparenz des Objekts darstellt, können wir den Hintergrund direkt mit RGBA verwenden, um das Problem der Transparenz zu veranschaulichen. Hier sind einige Beispiele:

<div Klasse="Box1">
	<p>rgba</p>
	<div class='one'>25 %</div>
	<div Klasse = 'two'>50 %</div>
	<div Klasse = 'drei'>75 %</div>
	<div Klasse = 'four'>100 %</div>
</div>

```css
.box1>div{
	Breite: 100px;
	Höhe: 100px;
	schweben: links;
}
.box1>.eins{
	Hintergrund: rgba (255,0,0,1);
}
.box1>.zwei{
	Hintergrund: rgba (255,0,0,.75);
}
.box1>.drei{
	Hintergrund: rgba (255,0,0,.5);
}
.box1>.vier{
	Hintergrund: rgba (255,0,0,.25);
} 

Aus dem obigen Beispiel können wir ersehen, dass das Div mit der Änderung der Transparenz transparent wird und der Text auf dem Div von der Transparenz nicht beeinflusst wird und seine ursprüngliche Textfarbe beibehält.

RGBA kann nicht nur auf den Hintergrund angewendet werden, wir können es auch überall dort verwenden, wo die Farbe eingestellt wird. Hier sind ein paar Beispiele:

Der erste: Schriftfarbe. Sie können die Transparenz beim Festlegen der Farbe festlegen.

<p class="p1">Schriftfarbe</p>
<p class="p2">Schriftfarbe</p>

.p1{
	Farbe: RGB (255,0,0)
}
.p2{
	Farbe: rgba(255,0,0,.5)
} 

Zweitens: Rahmenfarbe border-color

<div Klasse="div3"></div>
<div Klasse="div4"></div>

.div3,.div4{
	Breite: 100px;
	Höhe: 100px;
	Hintergrund: #f00;
}
.div3{
	Rahmen: 5px durchgehend rgb(0,0,0)
}
.div4{
	Rahmen: 5px durchgezogen rgba(0,0,0,.2)
} 

Der dritte Typ: Schriftschattenfarbe Textschatten

 <p class="p1">Schattenfarbe der Schrift</p>
<p class="p2">Schattenfarbe der Schrift</p>

.p1{
	Textschatten: 1px 2px 1px rgb(255,0,0);
}
.p2{
	Textschatten: 1px 2px 1px rgba (255,0,0,.5);
} 

Viertens: Ändern Sie die Schattenfarbe des Rahmens

<div Klasse="div3"></div>
<div Klasse="div4"></div>

.div3,.div4{
	Breite: 100px;
	Höhe: 100px;
	Hintergrund: #000;
}
.div3{
	Kastenschatten: 1px 5px 5px rgb(255,0,0);
	Rand unten: 20px;
}
.div4{
	Kastenschatten: 1px 5px 5px rgba(255,0,0,.5);
} 

Zusammenfassen

1. Aus den obigen Beispielen wissen wir auch, dass RGBA besser ist als das Festlegen von CSS-Transparenz für Elemente, da eine einzelne Farbe die Transparenz des gesamten Elements nicht beeinflusst. Sie wirkt sich nicht auf andere Attribute des Elements aus, wie z. B. Rahmen und Schriftarten, und hat keinen Einfluss auf die zugehörige Transparenz anderer Elemente.

2. Verwenden Sie Opazität für Transparenz. Wenn Opazität im übergeordneten Element verwendet wird, wirkt sich dies auf andere untergeordnete Elemente aus.

3. Abschließend muss ich Ihnen sagen, dass die RGBA-Methode nur in Browsern normal angezeigt werden kann, die RGBA-Attribute unterstützen.

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von CSS3 RGB und RGBA (transparente Farbe). Weitere verwandte CSS3 RGB- und RGBA-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!