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('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
background-repeat:repeat;
}
.demo2{
width: 400px;
height: 100px;
border: 1px solid red;
background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
background-repeat:no-repeat;
}
.demo3{
width: 400px;
height: 150px;
border: 1px solid red;
background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
background-repeat:repeat-x;
}
.demo4{
width: 400px;
height: 400px;
border: 1px solid red;
background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
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:
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!
