Heim > Artikel > Web-Frontend > Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text)
Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text)
- 青灯夜游Original
- 2018-10-11 10:52:2521794Durchsuche
Wie stelle ich die Kachelmethode von Hintergrundbildern mit CSS ein? In diesem Artikel erfahren Sie, wie Sie die Kachelung des Hintergrundbilds in CSS festlegen und wie Sie das Hintergrundbild in CSS so einstellen, dass es horizontal, vertikal oder nicht gekachelt ist. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Wenn wir das Attribut „Hintergrundbild“ verwenden, um ein Hintergrundbild auf der Seite anzuzeigen, kann das Hintergrundbild aus bestimmten Gründen (z. B. Bildgröße) sowohl horizontal als auch vertikal gekachelt werden. Die Methode wird wie unten gezeigt angezeigt :
 "153922468820556Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text)")
Aber manchmal brauchen wir eine solche Methode zur Anzeige von Hintergrundbildern nicht, wir möchten nur, dass das Hintergrundbild nur einmal angezeigt wird (nicht gekachelt) oder separat implementiert wird Kacheln horizontal, Fliesen vertikal. Wir können diese Kachelmethoden mit CSS implementieren!
Wie stellt man also die Kachelmethode für Hintergrundbilder in CSS ein? Tatsächlich ist es sehr einfach. Das CSS-Attribut „Hintergrundwiederholung“ kann die Kachelmethode des Hintergrundbilds festlegen. Das Attribut „background-repeat“ kann verwendet werden, um das Hintergrundbild horizontal, vertikal oder nicht oder vollständig zu kacheln, indem die folgenden Attributwerte festgelegt werden.
Wiederholung: Standardwert, legt fest, dass das Hintergrundbild vertikal und horizontal gekachelt wird, das heißt: vollständig gekachelt.
repeat-x: Legen Sie fest, dass das Hintergrundbild horizontal gekachelt werden soll.
repeat-y: Legen Sie fest, dass das Hintergrundbild vertikal gekachelt werden soll.
keine Wiederholung: Legen Sie fest, dass das Hintergrundbild nicht gekachelt, also nur einmal angezeigt wird.
Sehen wir uns anhand einfacher Codebeispiele an, wie diese Attributwerte implementiert werden:
1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 600px;
height: 540px;
margin: 50px auto;
background-image: url(Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text));
background-repeat:repeat;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>Rendering:
2. Legen Sie fest, dass das Hintergrundbild nicht gekachelt werden soll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 600px;
height: 540px;
margin: 50px auto;
background-image: url(Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text));
background-repeat:no-repeat;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html> Rendern:
3.  "153922574636407Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text)")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 600px;
height: 540px;
margin: 50px auto;
background-image: url(Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text));
background-repeat:repeat-x;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>Rendering:
4.  "153922590733077Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text)")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 600px;
height: 540px;
margin: 50px auto;
background-image: url(Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text));
background-repeat:repeat-y;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>Rendering:
Es gibt die folgenden  "153922593063545Wie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text)")
Wiederholen Sie das Originalbild, das durch „Hintergrundbild“ definiert ist Zuerst das Originalbild. Verwenden Sie das Attribut „background-repeat“, um die Kachelmethode festzulegen.
Zusammenfassung
: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unterCSS-Video-Tutorial , CSS3-Video-Tutorial ! Verwandte Empfehlungen:
PHP-Video-Tutorial zum Gemeinwohltraining
CSS3-Spezialeffektcode-Sammlung
Das obige ist der detaillierte Inhalt vonWie stelle ich den Kachelmodus des Hintergrundbilds in CSS ein? So legen Sie die Kachelung von Hintergrundbildern in CSS fest (ausführliche Erklärung mit Bildern und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!