Eine kurze Analyse der Verwendung von Hintergrund in CSS

Der Inhalt dieses Artikels ist eine kurze Analyse der Verwendung von Hintergrundhintergrund in CSS. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Definition und Verwendung

Grundlegende Attribute: Farbe, Bild, Position, Wiederholung

Hintergrundfarbebackground-color

Der Wert ist der Farbwert oder transparent Wählen Sie einen der beiden, der Standardwert ist transparent (transparent).

• Der Farbwert kann ein hexadezimaler Farbcode oder ein RGB-Farbwert oder ein englischer Code sein. Es wird nicht empfohlen, englische Codes zu verwenden. Verschiedene Browser können unterschiedliche Auswirkungen auf unterschiedliche Farbcodes haben.

• Es ist auch wichtig, als Fallback eine Hintergrundfarbe festzulegen. Hintergrundfarben werden überall unterstützt, während exotischere Funktionen wie Hintergrundverläufe nur in neueren Browsern unterstützt werden und Hintergrundbilder aus irgendeinem Grund möglicherweise nicht geladen werden. Daher ist es eine gute Idee, eine grundlegende Hintergrundfarbe festzulegen und diese Eigenschaften anzugeben, damit der Inhalt des Elements in jedem Fall lesbar ist.

Hintergrundbild background-image

Geben Sie das anzuzeigende Hintergrundbild an, mit url() legen Sie den Pfad fest.

• Die Standardmethode zur Bildwiederholung besteht darin, sowohl horizontal als auch vertikal zu wiederholen.

Hintergrundwiederholungbackground-repeat

Gibt an, wie das Hintergrundbild wiederholt wird. Der Standardwert ist repeat (wiederholen, bis der Hintergrund des gesamten Elements ausgefüllt ist)

值	描述
no-repeat	不重复
repeat	垂直和水平都重复
repeat-x	X轴方向（水平）重复
repeat-y	Y轴方向（垂直）重复

Hintergrundpositionbackground-position

Geben Sie die Position des Hintergrundbilds an, der Ursprung ist die obere linke Ecke (0,0).

• Sie können zwei Werte eingeben, um die X-Achse und die Y-Achse darzustellen, oder Sie können nur einen Wert eingeben.

• Sie können Längenwerte (px usw.), relative Werte (rem usw.), Prozentsätze, Schlüsselwörter (left, center, , right, top) bottom

• Wenn Sie nur einen Wert eingeben, stellt dieser den Wert der X-Achse dar und die Y-Achse wird zu

  center

• Werte können gemischt werden, z. B.

  background-position:9px top;

Zusätzliche Attribute

Hintergrundbildlauf

background-attachment

Geben Sie an, wie der Hintergrund scrollt, wenn der Inhalt scrollt.

值	描述
scroll	默认值。滚动，背景图随着页面的滚动而移动。
fixed	固定，当页面的其余部分滚动时，背景图像不会移动。

Verwandte Empfehlungen:

Verwendung des Randgrößenattributs in CSS

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung von Hintergrund in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!