CSS Backgrounds (Hintergrund)
CSS Hintergrund Eigenschaften werden verwendet, um den Hintergrund der HTML-Elemente zu definieren.
CSS-Eigenschaften definieren die Hintergrundeffekte:
- Hintergrund-Farbe
- background-image
- background-repeat
- background-attachment
- background-position
Hintergrundfarbe
background-color Eigenschaft definiert die Hintergrundfarbe des Elements.
Hintergrundfarbe der Seite im Körper Wähler zu verwenden:
CSS, werden die Farbwerte in der Regel in der folgenden Weise definiert:
- Hex - wie zum Beispiel: "# ff0000"
- RGB - wie zum Beispiel: "rgb (255,0,0)"
- Farbnamen - wie zum Beispiel: "rot"
Das folgende Beispiel, h1, p und div Elemente haben unterschiedliche Hintergrundfarben:
Beispiele
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Versuchen »
Hintergrundbild
background-image-Attribut beschreibt die Hintergrundbildelemente.
In der Standardeinstellung ist gefliest das Hintergrundbild wiederholt angezeigt das gesamte Element Einheit zu decken.
Seite Hintergrundbild Einstellung Beispiele:
Hier ist ein Beispiel für eine schlechte Kombination von Text und Hintergrundbild. Text schlechte Lesbarkeit:
Hintergrund-Bilder - horizontal oder vertikal Fliesen
Standardmäßig ist die Eigenschaft background-image in horizontaler oder vertikaler Ausrichtung der Seite mit Ziegeln gedeckt.
Wenn einige Bilder horizontal und vertikal gefliest, so sieht es sehr koordiniert werden, wie folgt:
Wenn ein Bildkachel (repeat-x) nur in der horizontalen Richtung, die Seitenhintergrund wird besser:
Hintergrundbild - Setzt die Position und nicht die Fliese
Lassen Sie das Hintergrundbild nicht den Text-Layout nicht beeinträchtigt
Wenn Sie nicht die Bildkachel wollen, können Sie die background-repeat Eigenschaft verwenden:
Das obige Beispiel, das Hintergrundbild und der Text erscheint in der gleichen Position, um das Seitenlayout sinnvoller zu machen, nicht die Lektüre des Textes beeinflussen, können wir die Position des Bildes ändern.
Hintergrund-Position-Eigenschaft kann verwendet werden, hier das Bild im Hintergrund zu ändern:
Beispiele
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Versuchen »
Hintergrund - Kurzschrift-Eigenschaft
In dem obigen Beispiel können wir die Hintergrundfarbe der Seite durch eine Menge von Attributen sehen zu steuern.
Um den Code für diese Eigenschaften zu vereinfachen, können wir diese Attribute verwenden, sind in der gleichen Eigenschaft kombiniert.
Stenografie Eigenschaft Hintergrundfarbe für den "Hintergrund":
Wenn die Kurzschrift-Eigenschaft verwenden, die Reihenfolge der Attributwerte als ::
- Hintergrund-Farbe
- background-image
- background-repeat
- background-attachment
- background-position
Alle diese Attribute müssen nicht verwenden, können Sie entsprechend verwenden, um den tatsächlichen Bedürfnissen der Seite.
In diesem Beispiel wird CSS zuvor beschrieben, können Sie die Instanz anzuzeigen: CSS Beispiele
Weitere Beispiele
Wie ein festes Hintergrundbild festlegen
Dieses Beispiel zeigt, wie ein festes Hintergrundbild zu setzen. Das Bild wird nicht mit dem Rest der Seite scrollen.
CSS Hintergrundeigenschaften
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |