Heim >Web-Frontend >CSS-Tutorial >So stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt
So stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt
- 青灯夜游Original
- 2020-12-23 11:28:586668Durchsuche
In CSS können Sie das Attribut „background-repeat“ verwenden, um zu verhindern, dass sich das Hintergrundbild wiederholt Hintergrundbild. Stellen Sie sicher, dass sich das Hintergrundbild nicht wiederholt.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Empfohlen: CSS-Video-Tutorial
CSS-Hintergrundbild festlegen
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示背景图片</title>
<style>
body{
background: url('2019062123225So stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt');
}
</style>
</head>
<!--飞鸟慕鱼博客-->
<body>
</body>
</html>Beim Ausführen des Codes haben wir das gefunden Das Hintergrundbild spielt keine Rolle. Wiederholen Sie den Vorgang horizontal oder vertikal, bis der gesamte Anzeigebereich abgedeckt ist.
CSS-Hintergrundwiederholungsattribut
Es gibt ein Hintergrundwiederholungsattribut in CSS, das festlegen kann, ob und wie das Bildhintergrundbild wiederholt wird, sowohl horizontal als auch vertikal. Wenn es nicht festgelegt ist und der Wert dieses Attributs festgelegt ist, wird das Hintergrundbild wie im obigen Beispielcode horizontal und vertikal wiederholt und deckt den gesamten anzuzeigenden Bereich ab.
Es gibt drei Werte, die wie folgt eingestellt werden können, wobei der Wiederholungswert der Standardwert ist.
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.
inherit: Gibt an, dass die Einstellung des Attributs „background-repeat“ vom übergeordneten Element geerbt werden soll.
CSS-Hintergrundbild wird nur horizontal (horizontal) wiederholt.
CSS-Code:
body{
background: url('2019062123225So stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt');
background-repeat:repeat-x;
} CSS-Code
body{
background: url('2019062123225So stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt');
background-repeat:repeat-y;
}
Das laufende Ergebnis ist wie unten gezeigt, die Hintergrundbilder werden vertikal wiederholt
CSS-Hintergrundbilder werden nicht wiederholt
CSS-Codebody{
background: url('2019062123225So stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt');
background-repeat:no-repeat;
}
Das laufende Ergebnis ist wie unten gezeigt, die Hintergrundbilder werden nicht horizontal und vertikal wiederholt, es wird nur ein Bild angezeigt. ! Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass sich das Hintergrundbild in CSS nicht wiederholt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!