CSS-Hintergrund (Hintergrund)

CSS-Hintergrund-Eigenschaften werden verwendet, um den Hintergrundstil eines Elements zu definieren. CSS-Hintergrund bezieht sich auf das Einstellen von Hintergrundeigenschaften durch CSS, wie das Einstellen verschiedener Stile durch CSS.

Hintergrund-Eigenschaft

CSS-Stile bieten für den Hintergrund eines Elements mehrere Eigenschaften, wie z.B.:background-Farbe,background-Bild,background-Wiederholung,background-attachmentundbackground-positionDas nächste Kapitel wird die Verwendung dieser Eigenschaften zur einheitlichen Einstellung verschiedener Stile für den Hintergrund erläutern.

Hintergrundfarbe

background-FarbeEigenschaft wird verwendet, um die Hintergrundfarbe des Elements zu setzen.

Das folgende Beispiel zeigt, wie man die Hintergrundfarbe der Webseite einstellt.

body {background-color:　#f0e68c;}

Farben in CSS werden in der Regel durch folgende Methoden angegeben:

• Hexadezimalwert-z.B. "#ff0000"

• RGB-Wert-z.B. " rgb(255,0,0）

• Farbname-wie "rot"

AnsehenCSS-Farbnameum die vollständige Liste möglicher Farbnamen zu erhalten.

Hintergrundbild

background-BildEigenschaft setzt das Bild als Hintergrund des HTML-Elements.

Siehe untenstehendes Beispiel, das zeigt, wie man die Hintergrundbilder der Seite einstellt.

body {background-image: url("leaf.jpg");}

Hintergrund-Wiederholung

Standardmäßig, diebackground-BildEigenschaft wird das Bild horizontal und vertikal wiederholt.

Durch die Verwendungbackground-WiederholungEigenschaft, mit der Sie steuern können, wie das Hintergrundbild in der Hintergrundfläche des html-Elements verlegt wird. Sie können ein vertikales (y-Achse), horizontales (x-Achse), beidseitiges oder beidseitig wiederholtes Hintergrundbild einstellen.

Siehe untenstehendes Beispiel, das zeigt, wie man die schrittweise Hintergrundfarbe der Webseite durch wiederholte horizontale Slices des Bildes einstellt.

body　{
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

Hintergrund-Attachment

background-attachmentDie Eigenschaft bestimmt, ob das Hintergrundbild相对于视口是固定的还是随包含块一起滚动。

body　{
　　　　width:　250px;
　　　　height:　200px;
　　　　overflow:　scroll;
　　　　background-image:　url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

Hintergrundposition

background-positionAttribute werden verwendet, um die Position des Hintergrundbildes zu steuern.

Wenn nichtbackground-positionfestgelegt, dann wird das Bild an der Standardposition des Elements links oben platziert, d.h.(0,0). Siehe untenstehendes Beispiel:

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

Im folgenden Beispiel befindet sich das Hintergrundbild im rechten oberen Ecke und die Position des Bildes wird durchbackground-positionAttribut spezifiziert.

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

Hintergrund-Attribut Kurzeigenschaft

Wie aus dem obigen Beispiel zu sehen ist, müssen bei der Verarbeitung des Hintergrunds viele Attribute berücksichtigt werden. Man kann auch alle diese Attribute in einem Attribut angeben, um den Code zu verkürzen. Dies wird als Kurzeigenschaft bezeichnet.

vonbackgroundAttribute sind zum Setzen aller einzelnen background-Attribute (d.h. Kurzschriftattribute)background-Farbe,background-Bild,background-Wiederholung,background-attachmentundbackground-position）in einem. Zum Beispiel:

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

Mit dem Kurzschriftsymbol kann der obige Beispiel so geschrieben werden:

body　{background:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

VerwendungbackgroundBei der Kürzel für die Eigenschaft sollte die Reihenfolge der Attributswerte sein.

Hintergrund:Farbe Bild Wiederholung Anhang Position ;

Fehlen oder sind die Werte eines einzelnen background-Attributs bei der Verwendung von Kurzschriftsymbole nicht angegeben, wird der Standardwert des Attributs verwendet (wenn vorhanden).