Um den Code zu verkürzen, ist es auch möglich, alle Hintergrundeigenschaften in einem anzugeben Einzeleigentum. Dies wird als Abkürzungseigenschaft bezeichnet.
Anstatt zu schreiben:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Sie können die Abkürzungseigenschaft background verwenden:
Verwenden Sie die Shorthand-Eigenschaft, um die Hintergrundeigenschaften in einem festzulegen Erklärung:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
</body>
</html>
Bei Verwendung der Abkürzungseigenschaft ist die Reihenfolge der Eigenschaftswerte:
Hintergrundfarbe
Hintergrundbild
Hintergrundwiederholung
Hintergrundanhang
Hintergrundposition
Es spielt keine Rolle, ob einer der Eigenschaftswerte fehlt, solange der andere sind in dieser Reihenfolge. Beachten Sie, dass wir in den obigen Beispielen die Eigenschaft „background-attachment“ nicht verwenden, da sie keinen Wert hat.
Legt alle Hintergrundeigenschaften in einer Deklaration fest
Legt fest, ob ein Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt
Gibt den Malbereich des Hintergrunds an
Legt die Hintergrundfarbe eines Elements fest
Legt das Hintergrundbild für ein Element fest
Gibt an, wo das/die Hintergrundbild(er) positioniert ist/sind
Legt die Startposition eines Hintergrundbilds fest
Legt fest, wie ein Hintergrundbild wiederholt wird
Gibt die Größe der Hintergrundbilder an.