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:2521697Durchsuche

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 :

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:

<!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:

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) 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. 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) repeat-x Stellen Sie das Hintergrundbild so ein, dass es horizontal kachelt

<!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. 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) repeat-y Legen Sie fest, dass das Hintergrundbild vertikal 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:repeat-y;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Rendering:

Es gibt die folgenden 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) Anweisungen

zum Attribut „Hintergrundwiederholung“:

Wiederholen Sie das Originalbild, das durch „Hintergrundbild“ definiert ist Zuerst das Originalbild. Verwenden Sie das Attribut „background-repeat“, um die Kachelmethode festzulegen.

Die Position des Hintergrundbilds wird entsprechend der Eigenschaft „background-position“ festgelegt. Wenn die Eigenschaft „Hintergrundposition“ nicht angegeben ist, wird das Bild in der oberen linken Ecke des Elements platziert.

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 unter

CSS-Video-Tutorial , CSS3-Video-Tutorial ! Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

CSS-Online-Handbuch

CSS3-Online-Handbuch

Div/CSS-Grafik-Tutorial

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das Bild der CSS3-Animation @keyframes wird größer, kleiner und die Farbe ändert sichNächster Artikel：Das Bild der CSS3-Animation @keyframes wird größer, kleiner und die Farbe ändert sich

In Verbindung stehende Artikel

Mehr sehen