Eine kurze Diskussion über die Hintergrundeigenschaft von CSS

Jedes Element im Dokumentbaum ist nur ein rechteckiges Feld. Diese Felder haben eine Hintergrundebene. Die Hintergrundebene kann vollständig transparent oder in anderen Farben sein oder ein Bild sein. Diese Hintergrundebene wird durch 8 CSS-Eigenschaften (plus 1 abgekürzte Eigenschaft) gesteuert.

Hintergrundfarbe

Die Eigenschaft Hintergrundfarbe legt die Hintergrundfarbe des Elements fest. Sein Wert kann ein beliebiger zulässiger Farbwert oder das Schlüsselwort transparent sein.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

Verwandte Tutorials: CSS-Video-Tutorial

Die Hintergrundfarbe wird auf der Seite gezeichnet, die durch den [Hintergrundclip] angegeben wird. (#backgroundclip)-Attribut im Bereich des Boxmodells. Wenn auch Hintergrundbilder festgelegt sind, wird die Farbebene dahinter gezeichnet. Im Gegensatz zu Bildebenen, die mehrere haben können, können wir für ein Element nur eine Farbebene haben.

Hintergrundbild

Das Attribut „Hintergrundbild“ definiert ein oder mehrere Hintergrundbilder für das Element. Sein Wert ist normalerweise die URL des mit der URL()-Notation definierten Bildes. Sie können auch none als Wert verwenden, aber dadurch wird eine leere Hintergrundebene generiert

.left { background-image: url('ire.png'); }
.right { background-image: none; }

Wir können auch mehrere durch Kommas getrennte Hintergrundbilder angeben. Nachfolgende Bilder werden in Richtung der Z-Achse hinter dem vorherigen Bild gezeichnet.

.middle { 
  background-image: url('khaled.png'), url('ire.png');
  /* Other styles */
  background-repeat: no-repeat; 
  background-size: 100px;
}

background-repeat

Das Attribut „background-repeat“ steuert die Größe des Hintergrundbilds, wenn es durch die [background-size] (# Attribut „Hintergrundgröße“ und Eigenschaft „Hintergrundposition“ (#Hintergrundposition) zum Kacheln nach der Positionierung.

Der Wert dieses Attributs kann die Schlüsselwörter „repeat-x“, „repeat-y“, „repeat“, „space“, „round“ und „no-repeat“ sein. Zusätzlich zu „repeat-x“ und „repeat-y“ können andere Werte x sein -Achse und Y-Achse Definieren Sie sie einmal, oder Sie können jede Dimension einzeln definieren.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

Das Attribut „background-size“ definiert die Größe des Hintergrundbilds. Sein Wert kann ein Schlüsselwort, eine Länge oder ein Prozentsatz sein.

Die für dieses Attribut verfügbaren Schlüsselwörter sind „enthält“ und „abdecken“. „contain“ skaliert das Bild proportional auf seine maximale Größe. Mit „Cover“ hingegen wird das Bild auf die kleinstmögliche Größe skaliert, wobei der gesamte Hintergrundbereich noch abgedeckt ist.

.left { 
  background-size: contain;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.right { background-size: cover; /* Other styles same as .left */ }

Für Länge und Prozentsatz können wir gleichzeitig die Breite und Höhe des Hintergrundbilds angeben und der Prozentwert wird basierend auf der Größe des Elements berechnet .

.left { background-size: 50px; /* Other styles same as .left */ }
.right { background-size: 50% 80%; /* Other styles same as .left */ }

background-attachment

Die Eigenschaft „background-attachment“ steuert, wie das Hintergrundbild relativ zum Ansichtsfenster und Element scrollt. Es hat drei mögliche Werte.

Fixiert bedeutet, dass das Hintergrundbild im Ansichtsfenster fixiert ist und sich nicht bewegt, selbst wenn der Benutzer im Ansichtsfenster scrollt. Lokal bedeutet, dass das Hintergrundbild an seiner Position innerhalb des Elements fixiert ist. Wenn das Element scrollbar ist und das Hintergrundbild oben positioniert ist, wird das Hintergrundbild nicht mehr angezeigt, wenn der Benutzer im Element nach unten scrollt. Scrollen bedeutet schließlich, dass das Hintergrundbild fixiert ist und nicht gescrollt wird, wenn der Elementinhalt gescrollt wird.

.left { 
  background-attachment: fixed;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Other styles same as .left */ }
.right { background-attachment: scroll; /* Other styles same as .left */ }

background-position

Dieses Attribut wird mit dem Attribut „background-origin“ kombiniert, um zu definieren, wo die Startposition des Hintergrundbilds sein soll. Sein Wert kann ein Schlüsselwort, eine Länge oder ein Prozentsatz sein, und wir können die Position entlang der x- und y-Achse angeben.

Die Schlüsselwörter, die für dieses Attribut verwendet werden können, sind „oben“, „rechts“, „unten“, „links“ und „mitte“. Wir können diese Schlüsselwörter beliebig kombinieren. Wenn nur ein Schlüsselwort explizit angegeben wird, wird standardmäßig das andere verwendet Center.

.top-left { 
  background-position: top;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /* Other styles same as .top-left */ }
.top-right { background-position: bottom;  /* Other styles same as .top-left */ }
.bottom-left { background-position: left;  /* Other styles same as .top-left */ }
.bottom-right { background-position: center;  /* Other styles same as .top-left */ }

Für Länge und Prozentsatz können wir auch die Position entlang der x- und y-Achse angeben. Prozentwerte werden basierend auf der Größe des Elements berechnet. Das Attribut „background-origin“ gibt an, vor welchem ​​Bereich des Boxmodells das Hintergrundbild positioniert werden soll.

Wenn der Wert „border-box“ ist, wird das Hintergrundbild basierend auf dem Randbereich positioniert. Wenn es „padding-box“ ist, wird seine Position basierend auf dem Randbereich positioniert Die Position wird basierend auf dem Inhaltsbereich positioniert.

.left { background-position: 20px 70px; /* Others same as .top-left */ }
.right { background-position: 50%; /* Others same as .top-left */ }

.left{ 
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a; 
  background-repeat: no-repeat;
  background-position: top left; 
  border: 10px dotted black; 
  padding: 20px;
}
.middle { background-clip: padding-box;  /* Other styles same as .left*/ }
.right { background-clip: content-box;  /* Other styles same as .left*/ }

background

最后，background属性是其他背景相关属性的简写。子属性的顺序无关紧要，因为每个属性的数据类型不同。然而对于background-origin 和 background-clip，如果只指定了一个盒模型区域，那么这两个属性都会应用这个值。如果指定了两个，那么第一个值将用于background-origin属性。

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Hintergrundeigenschaft von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!