So verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen-CSS-Tutorial-php.cn

So verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen

青灯夜游

Freigeben： 2023-01-05 16:12:59

Original

13801 Leute haben es durchsucht

Sie können das Attribut „background-repeat“ in CSS verwenden, um zu verhindern, dass sich das Hintergrundbild wiederholt. Fügen Sie einfach den Stil „background-repeat:no-repeat;“ hinzu . Wenn der Wert auf „keine Wiederholung“ eingestellt ist, wird die Einstellung nicht wiederholt.

So verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können wir das Hintergrundattribut verwenden, um das Hintergrundbild festzulegen, wie zum Beispiel den folgenden Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {
				background: url("img/1.jpg");
			}
		</style>
	</head>

	<body>
	</body>

</html>

Nach dem Login kopieren

Wenn wir den Code ausführen, stellen wir fest, dass das Hintergrundbild horizontal oder vertikal wiederholt wird, bis es die gesamte Anzeige abdeckt Bereich.

So verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen

Wie kann man also verhindern, dass sich das Hintergrundbild wiederholt? Sie können das Attribut „Hintergrundwiederholung“ verwenden.

Das Attribut „Hintergrundwiederholung“ kann festlegen, ob und wie das Bildhintergrundbild wiederholt wird. Der Standardwert ist, dass es sowohl horizontal als auch vertikal wiederholt wird.

Es gibt vier Werte, die wie folgt eingestellt werden können:

Wiederholung: Standard. Das Hintergrundbild wird vertikal und horizontal wiederholt.
repeat-x: Das Hintergrundbild wird horizontal wiederholt.
repeat-y: Das Hintergrundbild wird vertikal wiederholt.
keine Wiederholung: Das Hintergrundbild wird nur einmal angezeigt.

Es ist ersichtlich, dass, wenn der Wert dieses Attributs „keine Wiederholung“ ist, das Hintergrundbild nicht wiederholt werden kann

css-Hintergrundbild nicht wiederholt

body{
    background: url("img/1.jpg");
    background-repeat:no-repeat;
}

Nach dem Login kopieren

Das laufende Ergebnis ist wie unten gezeigt Das Hintergrundbild ist sowohl horizontal als auch vertikal. Es gibt keine Duplikate, es wird nur eines angezeigt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!