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:126893Durchsuche

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:

So erzielen Sie mit CSS einen Hintergrundbild-Wiederholungseffekt

Dann das Effekt der Wiederholung des Hintergrundbilds Das endgültige Bild sieht wie folgt aus (Teil-Screenshot):

So erzielen Sie mit CSS einen Hintergrundbild-Wiederholungseffekt

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!

html5 css css3 html 外边距内边距 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 erreichen Sie mit CSS eine zentrierte Ausrichtung von Elementen in einer flexiblen BoxNächster Artikel：So erreichen Sie mit CSS eine zentrierte Ausrichtung von Elementen in einer flexiblen Box

In Verbindung stehende Artikel

Mehr sehen