Heim > Artikel > Web-Frontend > So verwenden Sie CSS, um zu verhindern, dass sich Hintergrundbilder wiederholen
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.
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.
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!