Latest web development tutorials

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:

Beispiele

body {background-color:#b0c4de;}

Versuchen »

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

h1 {background-color:#6495ed;}
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:

Beispiele

body {background-image:url('paper.gif');}

Versuchen »

Hier ist ein Beispiel für eine schlechte Kombination von Text und Hintergrundbild. Text schlechte Lesbarkeit:

Beispiele

body {background-image:url('bgdesert.jpg');}

Versuchen »

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:

Beispiele

body
{
background-image:url('gradient2.png');
}

Versuchen »

Wenn ein Bildkachel (repeat-x) nur in der horizontalen Richtung, die Seitenhintergrund wird besser:

Beispiele

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Versuchen »

Hintergrundbild - Setzt die Position und nicht die Fliese

Bemerkung 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:

Beispiele

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Versuchen »

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

body
{
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":

Beispiele

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Versuchen »

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

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 设置背景图像是否及如何重复。