Heim > Artikel > Web-Frontend > So verwenden Sie das Attribut „Hintergrundwiederholung“.

So verwenden Sie das Attribut „Hintergrundwiederholung“.

青灯夜游Original: 2019-02-18 14:32:3210512Durchsuche

Die Eigenschaft „background-repeat“ von CSS wird verwendet, um festzulegen, wie das Hintergrundbild gekachelt wird. Hintergrundwiederholung: Wiederholung-x bedeutet, dass nur die horizontale Position das Hintergrundbild wiederholt; Hintergrundwiederholung: Wiederholung-y bedeutet, dass nur die vertikale Position das Hintergrundbild wiederholt.

CSS-Hintergrundwiederholungseigenschaft

Funktion: Legen Sie fest, ob und wie das Hintergrundbild wiederholt werden soll.

Grundlegende Syntax:

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat: Standardwert, das Hintergrundbild wird vertikal sein und horizontal wiederholen.

repeat-x: Nur das Hintergrundbild wird horizontal wiederholt.

repeat-y: Nur vertikale Positionen wiederholen das Hintergrundbild.

no-repeat: Das Hintergrundbild wird nicht wiederholt.

Beschreibung: Das Attribut „Hintergrundwiederholung“ definiert den Kachelmodus des Bildes. Wiederholen Sie den Vorgang ausgehend vom Originalbild, das durch „Hintergrundbild“ definiert und entsprechend dem Wert von „Hintergrundposition“ platziert wird.

Verwendungsbeispiel des CSS-Hintergrundwiederholungsattributs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.demo1{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat;
}
.demo2{
	width: 400px;
	height: 100px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:no-repeat;
}
.demo3{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-x;
}
.demo4{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-y;
}
</style>
</head>

<body>
<h3>repeat设置背景图片向垂直和水平方向重复</h3>
<div class="demo1"></div>
<h3>no-repeat设置背景图片不重复</h3>
<div class="demo2"></div>
<h3>repeat-x设置背景图片向水平方向重复</h3>
<div class="demo3"></div>
<h3>repeat-y设置背景图片向垂直方向重复</h3>
<div class="demo4"></div>
</body>
</html>

Rendering:

So verwenden Sie das Attribut „Hintergrundwiederholung“.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Attribut „Hintergrundwiederholung“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css position background

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 verwenden Sie die Eigenschaft „Hintergrundposition“.Nächster Artikel：So verwenden Sie die Eigenschaft „Hintergrundposition“.

In Verbindung stehende Artikel

Mehr sehen