Im Prozess des Webdesigns kann es manchmal erforderlich sein, das Hintergrundbild zu kacheln, da dadurch die gesamte Webseite besser aussieht. Die Bildkachel kann direkt reduziert werden, ohne die gesamte Breite und Höhe zu kacheln Seite, wie erstellt man also die Hintergrundbildkachel? Als Nächstes erfahren Sie in diesem Artikel, wie Sie die Hintergrundbildkachel mit CSS erstellen. Freunde in Not können sich darauf beziehen.
Sehen wir uns zunächst an, wie man die Kachelung des Hintergrundbilds mithilfe von CSS festlegt.
Wiederholen: Der Standardmodus kachelt den Hintergrund vollständig.
Keine Wiederholung: Kachelt nicht in Richtung der X- und Y-Achse.
Wiederholen-x : Den Hintergrund horizontal kacheln;
repeat-y: Den Hintergrund vertikal kacheln.
Werfen wir einen Blick auf den Implementierungscode dieser vier Hintergrundbildkacheln in CSS.
CSS-Hintergrundbild-Kachelcode für vollständig gekachelten Hintergrund:
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>Der CSS-Hintergrundbild-Kacheleffekt ist wie folgt:
Das CSS-Hintergrundbild ist nicht in Richtung der X- und Y-Achse gekachelt:
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>Der CSS-Hintergrund ist in X- und Y-Richtung Achsenrichtungen Der Effekt, wenn in keiner Richtung gekachelt wird, ist wie folgt:
CSS-Hintergrundbild gekachelt, horizontal gekachelter Hintergrund:
Hintergrundbild Jetzt wird der Kachelvorgang nur horizontal auf dem 🎜>
CSS-Hintergrundbild mit vertikal gekacheltem Hintergrund ausgeführt:
Das Hintergrundbild wird jetzt nur auf der Y-Achse gekachelt , also horizontal, und ist nicht horizontal gekachelt<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-x;
}
</style>
<div id="content">
</div>
</body>
</html>
Der CSS-Hintergrundeffekt für vertikale Kacheln ist wie folgt:
Das Obige ist die Zusammenfassung dieses Artikels. Der gesamte Inhalt ist vorhanden. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website.
Das obige ist der detaillierte Inhalt vonWie kann man ein Hintergrundbild mit CSS kachelbar machen? Einführung in vier Möglichkeiten zum Kacheln von CSS-Hintergrundbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
