In der Webentwicklung können Sie häufig transparente Hintergründe hinzufügen. Die Suche nach der transparenten Hintergrundeigenschaft in CSS gibt Ihnen keine Ergebnisse, da es keine solche transparente Background-Eigenschaft gibt. Sie können jedoch alternative Eigenschaften oder den transparenten Farbcode für denselben Zweck verwenden.

In diesem Blog erfahren wir, ob wir die transparente Hintergrundfarbe in CSS festlegen können.

So setzen Sie transparente Hintergrundfarbe in CSS?

Um die transparente Hintergrundfarbe festzulegen, werden wir die folgenden Methoden verwenden:

• Hintergrund-Farben-Eigenschaft
• Opazitätseigenschaft

Lassen Sie uns jede Methode einzeln durchlaufen!

Methode 1: Verwenden von Hintergrundfarben, um transparente Hintergrundfarbe in CSS festzulegen

In CSS, die “HintergrundfarbeEigenschaft wird verwendet, um dem Hintergrund eine andere Farbe zuzuweisen. Darüber hinaus kann die Verwendung der Eigenschaft von Hintergrundfarben auf eine bestimmte Weise auch die Transparenz verschiedener Elemente festlegen.

Beispiel

Hier ist unsere HTML -Seite mit zwei Hintergründen, eines als Bild und das andere als Hintergrund des Containers. Wir möchten den Hintergrund des Containers transparent machen, damit wir aufgrund der Transparenz des Containers das hinzugefügte Bild durchsehen können:

In unserer HTML -Datei haben wir eine hinzugefügt “

"Tag mit einer Klasse namens"BG”In einem Divelelement und in die“ platziert “" Schild:

Transparent

Verwenden Sie in der CSS -Datei die “." Vor "BGUm es als Klasse zu erklären. Fügen Sie dann die Eigenschaft von Hintergrundfarben zusammen mit dem RGBA-Wert hinzu und weisen Sie die “zu100px"Polsterung und setzen Sie die Textfarbe als"Weiss”. Da das RGBA -Farbschema sein ordnungsgemäßes Format hat, werden wir alle seine Werte auf Null setzen, mit Ausnahme des letzten. Setzen Sie den letzten Wert auf “.25”Um einen Transparenzschatten zu bekommen. Es kann jedoch durch ersetzt werden “0Einen klaren Transparenzschatten haben.

Zuweisen Sie im nächsten Schritt der Div eine Polsterung “200pxUnd stellen Sie die URL des gewünschten Hintergrundbildes fest:

Notiz: Wir haben die zuvor als "festgelegte Hintergrundfarbe als" nicht entfernt "Aqua”. Infolgedessen ist der transparente Hintergrund des Containers unter Verwendung des RGBA -Farbschemas deutlich sichtbar.

Wie Sie sehen können, haben wir erfolgreich die transparente Hintergrundfarbe mithilfe von Hintergrundfarbe eingestellt.

Schauen wir uns nun die Methode der Verwendung einer anderen CSS -Eigenschaft zum Festlegen einer transparenten Hintergrundfarbe an.

Methode 2: Verwenden der Opacity -Eigenschaft, um transparente Hintergrundfarbe in CSS festzulegen

In CSS, die “OpazitätEigenschaft wird verwendet, um die Elemente transparent zu machen. Es gibt jedoch immer Transparenzstufen, die angegeben werden können, z. B. 1 - 100 (%). Zum Beispiel ein Element mit “0Opazität wird völlig transparent sein.

Beispiel 1

In diesem Beispiel werden wir die “zuweisen“0.2"Opazitätswert für die".BG" Klasse. Alle anderen Eigenschaften bleiben gleich:

Hier haben wir den transparenten Hintergrund erfolgreich festgelegt:

Das Festlegen der Deckkraft hat jedoch auch den Transparenzeffekt auf den hinzugefügten Text angewendet. Um ein solches Szenario anzugehen, nehmen wir ein weiteres Beispiel.

Beispiel 2

Wenn Sie einen Opazitätswert zuweisen, wird er auf jedes Element innerhalb des angegebenen Containers mit derselben Klasse angewendet. Wenn Sie jedoch die Klasse des hinzugefügten Textes ändern, können Sie das angegebene Problem beheben.

Dazu werden wir die Klasse zuweisen “Text" Zu

Tag und Klasse “BG”Zum Tag:

Transparent

Jetzt die "Transparent"Text gehört zu einer anderen Klasse".Text”. Also werden wir ihre angeben “Position"Und geben Sie ihm den Wert"absolut”, Zuweisen Sie die“Rand"Eigenschaftswert als"-9%" Und "links"Wert als"50px”Um den Text auf das Feld zu bringen:

.Text
Position: absolut;
Margin -Top: -9%;
Rand-Links: 50px;
Farbe weiß;

Es ist ersichtlich, dass jetzt die Deckkraft nur auf den Container angewendet wird, um sie transparent zu machen, ohne den hinzugefügten Text zu ändern:

Wir haben die einfachsten Möglichkeiten zur Verfügung gestellt, die transparente Hintergrundfarbe in CSS festzulegen.

Abschluss

Um transparente Hintergrundfarbe in CSS festzulegen, können Sie die „verwenden“Hintergrundfarbe”Eigenschaft mit dem RGBA -Wert und dem“Opazität" Eigentum. Die Hintergrundfarbe kann zweimal verwendet werden, eine zum Einstellen des ursprünglichen Hintergrunds und die zweite, damit der erste mit dem RGBA-Farbschema transparent ist. Der Eigenschaftswert der Opazität wird jedoch auf alle Elemente der spezifischen Klasse angewendet, für die er definiert ist. In diesem Artikel haben wir zwei wirksame Methoden zur Festlegung der transparenten Hintergrundfarbe in CSS behandelt.