suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen

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

青灯夜游
青灯夜游Original
2021-04-29 16:10:0813745Durchsuche

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>

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;
}

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!

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：So legen Sie abgerundete Ränder in CSS festNächster Artikel：So legen Sie abgerundete Ränder in CSS fest

In Verbindung stehende Artikel

Mehr sehen