So setzen Sie die Deckkraft von Hintergrund in CSS

Das Einrichten von Hintergründen in Webanwendungen ist ein üblicher Vorgang, der die Augen des Benutzers anzieht. Manchmal könnte es jedoch zu einer großen Ablenkung führen. Um eine solche Situation zu vermeiden, stellen Webentwickler ihren Hintergrund transparent, indem sie die Opazität anwenden oder alternative CSS -Eigenschaften der Opazität verwenden.

In diesem Handbuch werden wir darüber abdecken, wie Sie die Hintergrundunterschiede in CSS festlegen können.

So setzen Sie die Deckkraft von Hintergrund in CSS?

In CSS bezieht sich die Deckkraft von Hintergrund auf die folgenden Begriffe:

• • Hintergrundbild -Deckkraft
  • Hintergrundfarbe Deckkraft

Wir werden jetzt beide individuell erklären!

So setzen Sie die Hintergrundbild -Deckkraft in CSS?

Der "OpazitätEigenschaften können verwendet werden, um Bilder im Hintergrund oder überall auf der Webseite transparent zu machen. Texte und Hintergrundfarben können auch durch die Verwendung dieser Eigenschaft transparent gemacht werden.

Schauen Sie sich das angegebene detaillierte Beispiel an, um mehr über die Einstellung der Hintergrundbilddeckigkeit in CSS zu erfahren.

Beispiel

Derzeit haben wir ein Bild, das im Hintergrund unseres Containers festgelegt ist:

In unserer HTML -Datei haben wir ein Tag mit dem "hinzugefügt" hinzugefügtMy-IMGID im Körperbereich:

Um die Hintergrundbilddeckigkeit festzulegen, müssen wir unser Bildelement stylen. Verwenden Sie dazu die “#”Vor dem Ausweis benannt“My-IMG" als "#my-img”Für das Styling es. Wenn das Bild im Hintergrund des ausgewählten Behälters verwendet wird, geben Sie dem Behälter Platz mit “Polsterung" von "15%”. Stellen Sie im nächsten Schritt das Bild als Hintergrund, indem Sie die „verwenden“Hintergrund" Eigentum; Präzisiere das "No-Repeat"Wert entlang"URL ()”Wert, um Bildwiederholung zu vermeiden. Stellen Sie schließlich die Deckkraft als Wert fest “0.2”Oder entsprechend Ihren Vorlieben:

Speichern Sie nun den Code und öffnen Sie die HTML -Datei im Browser. In unserem Fall werden wir es mit Hilfe des “öffnen“Live -Server”:

Hier wurde die Opazität unseres Bildes erfolgreich angewendet:

Gehen wir zum nächsten Abschnitt!

So setzen Sie die Hintergrundfarbe in CSS Hintergrundfarbe?

Es gibt immer die Chancen, dass Sie im Hintergrund der Website möglicherweise feste oder Gradientenfarben finden. Für die Deckkraft der Hintergrundfarben werden wir th verwendene “Hintergrundfarbe" Eigentum. Diese Eigenschaft hilft bei der Einrichtung der Hintergrundfarbe. Es kann jedoch auch verwendet werden, um die Deckkraft von Hintergrundfarben festzulegen oder sie transparent zu machen.

Schauen Sie sich das folgende Beispiel für die Verwendung der angegebenen Eigenschaft an.

Beispiel 1: Verwenden Sie die Eigenschaft von Hintergrundfarben, um eine Image-Deckkraft festzulegen

In diesem Beispiel ist die Hintergrundfarbe unserer Webseite orange und wir müssen ihre Deckkraft festlegen:

Dazu verwenden wir den Hex -Farbcode mit dem “Hintergrundfarbe" Eigentum. Mit einer bestimmten Sechskantfarbe wenden wir die Deckkraft auf die Hintergrundfarbe an:

Notiz: Wechseln "#00000020"Wert zu"#00000000”Wird Ihren Hintergrund vollständig transparent machen.

Speichern Sie den Code durch Drücken “Strg + sUnd öffnen Sie es mit dem Live -Server:

Ausgang

Nehmen wir nun ein weiteres interessantes Beispiel für die Festlegung der Hintergrundfarbe in CSS.

Beispiel 2: Verwenden Sie die Eigenschaft von Hintergrundfarben, um ein Bild transparent zu machen

In diesem Beispiel werden wir die „verwenden“Hintergrund"Eigenschaft und setzen Sie ihren Wert auf"transparent”. Infolgedessen ist der Hintergrund transparent, aber immer noch Teil des Containers:

Hier können wir den völlig transparenten Hintergrund sehen:

Überprüfen Sie zur Überprüfung die hinzugefügten Elemente im Container:

Wir haben die einfachsten Möglichkeiten geliefert, um die Deckkraft von Hintergräben festzulegen.

Abschluss

Verwenden Sie die “, um die Deckkraft von Hintergrund zu setzen, die“Opazität","Hintergrundfarbe", oder "Hintergrund" Eigentum. Die Opazität bietet Steuerung über die Einstellung der Hintergrund -Deckkraft. Die Hintergrund-Farben-Eigenschaft kann dazu beitragen, die Transparenz von Hintergründen über den Hex-Farbcode anzuwenden, während die Hintergrundeigenschaft unkompliziert ist. Wenn Sie es transparent einstellen, wird der Hintergrund verschwinden. In diesem Artikel haben wir demonstriert.