CSS - Hintergründe
In diesem Kapitel erfahren Sie, wie Sie Hintergründe für verschiedene HTML-Elemente festlegen. Sie können die folgenden Hintergrundeigenschaften eines Elements festlegen:
Das background-color Mit der Eigenschaft wird die Hintergrundfarbe eines Elements festgelegt.
Das background-image Mit der Eigenschaft wird das Hintergrundbild eines Elements festgelegt.
Das background-repeat Mit der Eigenschaft wird die Wiederholung eines Bildes im Hintergrund gesteuert.
Das background-position Mit dieser Eigenschaft wird die Position eines Bildes im Hintergrund gesteuert.
Das background-attachment Mit dieser Eigenschaft wird das Scrollen eines Bildes im Hintergrund gesteuert.
Das background Eigenschaft wird als Kurzform verwendet, um eine Reihe anderer Hintergrundeigenschaften anzugeben.
Stellen Sie die Hintergrundfarbe ein
Das folgende Beispiel zeigt, wie die Hintergrundfarbe für ein Element festgelegt wird.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie das Hintergrundbild ein
Wir können das Hintergrundbild einstellen, indem wir lokal gespeicherte Bilder wie unten gezeigt aufrufen -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>Es wird das folgende Ergebnis erzeugt -
Wiederholen Sie das Hintergrundbild
Das folgende Beispiel zeigt, wie das Hintergrundbild wiederholt wird, wenn ein Bild klein ist. Sie können den Wert " Keine Wiederholung" für die Eigenschaft " Hintergrundwiederholung" verwenden, wenn Sie ein Bild nicht wiederholen möchten. In diesem Fall wird das Bild nur einmal angezeigt.
Standardmäßig hat die Eigenschaft background-repeat den Wiederholungswert .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie das Hintergrundbild vertikal wiederholt wird.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie das Hintergrundbild horizontal wiederholt wird.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie die Position des Hintergrundbilds ein
Das folgende Beispiel zeigt, wie Sie die Position des Hintergrundbilds 100 Pixel von der linken Seite entfernt einstellen.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie Sie die Position des Hintergrundbilds 100 Pixel von der linken Seite und 200 Pixel von oben nach unten einstellen.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Stellen Sie den Hintergrundanhang ein
Der Hintergrundanhang bestimmt, ob ein Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt.
Das folgende Beispiel zeigt, wie Sie das feste Hintergrundbild festlegen.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Das folgende Beispiel zeigt, wie Sie das Hintergrundbild für den Bildlauf festlegen.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Kurzschrift Eigentum
Mit der Hintergrundeigenschaft können Sie alle Hintergrundeigenschaften gleichzeitig festlegen. Zum Beispiel -
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>