Transparenz mit Hex-Code in HTML einstellen

1. Verwenden Sie den CSS-Hexcode, um den Hintergrund in HTML transparent zu machen
2. Verwenden Sie die CSS-Eigenschaft opacity, um den Hintergrund in HTML transparent zu machen
3. Verwenden Sie die CSS-Eigenschaft background, um den Hintergrund in HTML transparent zu machen

In diesem Artikel werden Methoden vorgestellt, um HTML-Elementen Transparenz zu verleihen. Wir werden CSS verwenden, um Transparenz hinzuzufügen.

Verwenden Sie den CSS-Hexcode, um den Hintergrund in HTML transparent zu machen

Wir können den CSS-Hex-Code verwenden, um einem HTML-Element Transparenz zu verleihen. Wir können den Hex-Code als Wert der Eigenschaft background setzen. Der Hex-Code, den wir verwenden werden, ist achtstellig. Das Format des achtstelligen Hex-Codes ist #RRGGBBAA. Die ersten sechs Ziffern repräsentieren den Hex-Code für Rot, Grün bzw. Blau. Die letzten beiden Ziffern sind der Hex-Code für die Deckkraft.

Erstellen Sie zum Beispiel ein div und schreiben Sie einen Text hinein. Wählen Sie in CSS das div aus und setzen Sie die background-Eigenschaft auf #00ff0080. Der Hexcode #00ff00 steht für die grüne Farbe und 80 für die Deckkraft der Farbe. Dadurch wird im Text ein grüner Hintergrund erzeugt und die Deckkraft von 50% oder der Wert 128 erhalten. Das binäre Äquivalent des hexadezimalen Werts 80 ist 128. Somit können wir Hex-Code verwenden, um ein transparentes Element in HTML zu erstellen.

Beispielcode:

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

Verwenden Sie die CSS-Eigenschaft opacity, um den Hintergrund in HTML transparent zu machen

Mit der Eigenschaft opacity in CSS können wir einen transparenten Hintergrund erstellen. Wir können diese Eigenschaft für alle Elemente in HTML verwenden und den Hintergrund transparent machen. Die Eigenschaft opacity legt die Opazität eines Elements fest. Es ist dafür verantwortlich, den Grad festzulegen, in dem der Inhalt hinter einem Element verborgen wird. Der Wert reicht von 0.0 bis 0.9. Die niedrigeren Werte entsprechen der niedrigsten Deckkraft und umgekehrt. Das bedeutet, dass bei einem Deckkraftwert nahe 0.0 der Inhalt hinter dem Element besser sichtbar ist. Und der Inhalt wirkt transparenter. Wir können auch die %-Darstellung verwenden, um die Deckkraft einzustellen. Sie reicht von 0% bis 100%.

Erstellen Sie beispielsweise ein div mit der Klasse bg. Schreiben Sie Text als Element zwischen das div. Wählen Sie in CSS das Element div aus und setzen Sie den Hintergrund mit der Eigenschaft background-color auf yellow. Wählen Sie dann mit dem Klassenselektor die Klasse bg aus. Als nächstes stellen Sie die opacity auf den Wert 0.5.

Im folgenden Beispiel wird eine gelbe Hintergrundfarbe erstellt, in die Text geschrieben wird. Der Deckkraftwert 0.5 fügt dem Element eine gewisse Transparenz hinzu. Wir können den Wert von 0.0 auf 1.0 ändern, um den Grad der Opazität im folgenden Beispiel zu testen. Daher haben wir im Tutorial der Hintergrundfarbe Transparenz hinzugefügt.

Beispielcode:

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

Verwenden Sie die CSS-Eigenschaft background, um den Hintergrund in HTML transparent zu machen

Die Verwendung der Eigenschaft opacity hat einen Nachteil. Der im übergeordneten Element eingestellte Wert opacity gilt für alle untergeordneten Elemente. Um dieses Problem zu beheben, können wir die CSS-Eigenschaft background verwenden. Wir können dem Element den Wert rgba vorgeben und verhindern, dass es auf untergeordnete Elemente Deckkraft anwendet. Die Eigenschaft background verwendet die Funktion rgba(), um die RGB-Farben mit ihrer Deckkraft anzugeben. Die Syntax der Funktion wird unten gezeigt.

rgba(red, green, blue, alpha)

Wir können die Intensität der RGB-Werte im Bereich von 0 bis 255 angeben. Wir können den Prozentwert auch im Bereich von 0% bis 100% darstellen. Wir können den Wert von Alpha angeben, wie wir in der ersten Methode besprochen haben.

Nehmen Sie einige CSS-Änderungen am Codebeispiel der ersten Methode vor. Entfernen Sie in der Auswahl von div die Eigenschaft background-color und fügen Sie die Eigenschaft background hinzu. Schreiben Sie die Funktion rgba() als Wert der Eigenschaft. Stellen Sie den Wert von Rot auf 255 und 0 für Grün und Blau ein. Schreiben Sie den alpha-Wert als 0.2. Entfernen Sie dann die Klassenauswahl bg.

Die folgenden Code-Snippets erzeugen einen roten Hintergrund im Text und erhöhen die Transparenz.

Beispielcode:

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}