Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS einen Hintergrundbild-Wiederholungseffekt
So erzielen Sie mit CSS einen Hintergrundbild-Wiederholungseffekt
- 藏色散人Original
- 2018-11-30 17:36:126921Durchsuche
So erzielen Sie den Hintergrundbild-Wiederholungseffekt mit CSS: Erstellen Sie zunächst eine HTML-Beispieldatei und geben Sie den Basiscode ein. Implementieren Sie ihn dann über „background-image: url(img/154e.png); wiederholen: Attribut „Wiederholen;“ Das Hintergrundbild wiederholt den Effekt.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
Hintergrundbild-Wiederholungseffekt, ich glaube, jeder hat ihn auf großen Websites gesehen. Ein gut aussehender Hintergrundbild-Wiederholungseffekt kann unsere Webseite schöner und inhaltsreicher machen. Diesen Effekt können wir durch die hintergrundbezogenen Eigenschaften in CSS erreichen.
Im Folgenden stellen wir Ihnen anhand eines einfachen Codebeispiels den Effekt sich wiederholender Hintergrundbilder mit CSS vor.
Das Codebeispiel lautet wie folgt:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
body{
background-image: url(img/154e.png);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>Das einzelne Bild, das wir hier verwenden, lautet wie folgt:
Dann das Effekt der Wiederholung des Hintergrundbilds Das endgültige Bild sieht wie folgt aus (Teil-Screenshot):
Einführung zu verwandten Attributen:
background-image attribute OK Legt ein Hintergrundbild für das Element fest. Der Hintergrund eines Elements nimmt die gesamte Größe des Elements ein, einschließlich Abstand und Ränder, jedoch keine Ränder.
Hintergrundwiederholungsattribut Legen Sie fest, ob und wie das Hintergrundbild wiederholt werden soll.
Hinweis: Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich horizontal und vertikal.
Empfohlene Referenz: „CSS-Tutorial“
In diesem Artikel geht es um die Einführung von CSS, um den Effekt der Hintergrundbildwiederholung zu erzielen Es wird Freunden helfen, die es brauchen. Hilft!
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen Hintergrundbild-Wiederholungseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!