Einstellen der Hintergrund-Opazität in CSS

1. Verwenden Sie die Eigenschaft opacity, um eine transparente Farbe in CSS zu erstellen
2. Verwenden Sie die Funktion rgba(), um transparente Farbe in CSS zu erstellen
3. Verwendung von Hex-Werten zur Erstellung einer transparenten Farbe in CSS

In diesem Artikel stellen wir drei Methoden vor, um mit CSS transparente Farben in HTML zu erstellen. Es wird die Hintergrundopazität in CSS festlegen.

Verwenden Sie die Eigenschaft opacity, um eine transparente Farbe in CSS zu erstellen

Die opacity ist eine der Eigenschaften, die in CSS verwendet werden, insbesondere bei den Farben. Wir können Werte zwischen 0 bis 1 verwenden, um die Deckkraft einer Farbe oder eines Elements anzuzeigen. Der Wert 1 bedeutet, dass die Farbe 100 % deckend ist. Das bedeutet, dass die Farbe überhaupt nicht transparent ist. Wenn wir den Wert anfänglich verringern, wird das Element transparenter. Wenn der Wert opacity 0.5 beträgt, wird die Farbe halbtransparent oder 50% transparent. Bei der Verwendung von opacity wird jedoch auch das untergeordnete Element transparent.

Erstellen Sie beispielsweise ein HTML-Dokument mit einer Überschrift h1 und einer Klasse transparent. Setzen Sie die background-color als #cc33ff und den opacity-Wert 0.4, nachdem Sie in CSS die Klasse transparent ausgewählt haben. Wenn die Überschrift und ihre Hintergrundfarbe transparenter werden sollen, können wir den Deckkraftwert verringern.

Das folgende Beispiel zeigt, dass die Hintergrundfarbe und die Überschrift h1 transparent werden, wenn wir den Wert opacity beibehalten, also 0.4.

Beispielcode:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

Verwenden Sie die Funktion rgba(), um transparente Farbe in CSS zu erstellen

Die Funktion rgba() definiert Farben nach dem Rot-Grün-Blau-Alpha-Modell. Das rbg in der Funktion rbga() bezeichnet Farbwerte für Rot, Grün und Blau, während a die Deckkraft der Farbe bezeichnet. Jeder Parameter (Rot, Blau, Grün) definiert die Farbintensität zwischen 0-255. Wobei der Wert von a zwischen 0-1 liegen muss. Zum Beispiel rgba(255, 100, 100, 0.4). Je kleiner der Wert von a, desto transparenter wird die Farbe. Das untergeordnete Element wird nicht transparent, im Gegensatz zu der Eigenschaft opacity. Wenn der Wert von a 0.5 beträgt, ist die Farbe halbtransparent oder zu 50 % transparent.

Erstellen Sie beispielsweise ein HTML-Dokument mit der Überschrift h1 und der Klasse transparent. Schreiben Sie den Text Hello World zwischen das Überschrift-Tag. Verwenden Sie die Funktion rgba(), um der Klasse eine Hintergrundfarbe zu geben. Setzen Sie den rgba-Wert als rgba(255, 100, 100, 0.4). Verringern Sie den Wert von a, um ihn transparenter zu machen, und erhöhen Sie den Wert von a, um ihn undurchsichtiger zu machen.

Das folgende Beispiel zeigt, dass die Hintergrundfarbe der Überschrift transparent wird, wenn wir den Wert von a auf 0.4 setzen. Das untergeordnete Element heading wird jedoch nicht transparent.

Beispielcode:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

Verwendung von Hex-Werten zur Erstellung einer transparenten Farbe in CSS

Wir verwenden oft Hex-Werte mit sechs Zeichen gefolgt von #, um einem HTML-Element eine bestimmte Farbe zu geben. Zum Beispiel #A5BE32. Wir können die Farbe transparent machen, indem wir am Ende des Hex-Werts zwei numerische Werte hinzufügen und daraus einen achtstelligen Hex-Wert machen. Zum Beispiel #A5BE3280. Dabei bezeichnet #A5BE32 die Farbe und 80 am Ende bezeichnet die Deckkraft der Farbe. Wenn Sie eine 50% transparente Farbe wünschen, können Sie den Wert 80 am Ende des Hex-Codes verwenden. Da die Skala in RGB-Farben 0-255 beträgt, wäre die Hälfte 255/2 = 128, was in Hex umgewandelt zu 80 wird. Das untergeordnete Element wird nicht transparent, im Gegensatz zu der Eigenschaft opacity.

Erstellen Sie beispielsweise ein HTML-Dokument mit der Überschrift h1 und der Klasse transparent, also <h1 class="transparent">Hello world </h1>. Geben Sie der Klasse die Hintergrundfarbe #A5BE32. Fügen Sie am Ende des Hex-Codes 80 hinzu, um ihn zu 50% transparent zu machen. Damit wird der Hex-Code #A5BE3280.

Das folgende Beispiel zeigt, dass die Hintergrundfarbe der Überschrift 50% transparent wird, wenn wir am Ende des Hex-Codes 80 hinzufügen.

Beispielcode:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}