Heim >Web-Frontend >CSS-Tutorial >Wie wiederhole ich ein Randbild mit CSS?
Wie wiederhole ich ein Randbild mit CSS?
- 王林nach vorne
- 2023-09-10 11:13:02991Durchsuche
CSS (Cascading Style Sheets) ist ein leistungsstarkes Tool, mit dem wir die visuelle Darstellung von HTML-Elementen auf einer Webseite steuern können, einschließlich des Hinzufügens von Hintergrundbildern zu Elementen. Eine nützliche Technik besteht darin, das Randbild mithilfe von CSS zu wiederholen. Dadurch können wir interessante und komplexe Rahmen für Elemente erstellen, ohne mehrere Bilder oder komplexen HTML- und CSS-Code zu verwenden.
Grammatik
Hier ist die Syntax zum Wiederholen eines Rahmenbilds mithilfe von CSS –
sss - selector {
border-image: source slice width outset repeat;
}
Hier gibt source den Pfad zu dem Bild an, das wir für den Rand verwenden möchten, Slice gibt an, wie das Bild in Teile geschnitten werden soll, width gibt die Breite des Bildes für den Rand an, outset gibt an um wie viel das Randbild vom Rand des Elements versetzt sein soll. repeat Gibt an, wie sich das Bild entlang des Randes wiederholen soll.
Randbild
Bevor wir uns ansehen, wie man ein Randbild mit CSS wiederholt, ist es wichtig zu verstehen, was ein Randbild ist. Rahmenbilder sind Bilder, mit denen ein Rahmen um HTML-Elemente erstellt wird. Ein Randbild ist normalerweise ein Muster oder Design, das sich um den Rand eines Elements wiederholt und so einen dekorativen Rahmen bildet.
Um Rahmenbilder in CSS zu verwenden, definieren wir zunächst das Bild mithilfe der Eigenschaft „border-image“. Das Attribut „border-image“ wird verwendet, um anzugeben, woher das Bild kommt, wie das Bild geschnitten wird und wie sich das Bild an den Rändern des Elements wiederholt.
Randbild mit CSS wiederholen
Um ein Randbild mit CSS zu wiederholen, müssen wir die Eigenschaft „border-image-repeat“ definieren. Diese Eigenschaft gibt an, wie das Randbild an den Rändern des Elements wiederholt werden soll.
Das Attributborder-image-repeat hat vier mögliche Werte –
stretch – Das Randbild wird gestreckt, um den gesamten Rand auszufüllen.
Wiederholen – Das Randbild wiederholt sich horizontal und vertikal, um den gesamten Rand auszufüllen.
rund – Das Randbild wiederholt sich horizontal und vertikal, wird aber auch gestreckt oder gestaucht, um es an die Größe des Randes anzupassen.
Leerzeichen – Das Randbild wiederholt sich horizontal und vertikal, ist aber auch so beabstandet, dass es der Größe des Randes entspricht.
Schritte
Um sich wiederholende Rahmenbilder mithilfe von CSS zu verarbeiten, befolgen wir die unten angegebenen Schritte -
Wir erstellen oder finden ein Bild, das wir als Randmuster verwenden können.
Als nächstes legen wir den Rahmenstil und die Breite für das HTML-Element fest, dem wir einen Rahmen hinzufügen möchten.
Abschließend legen wir mit der CSS-Eigenschaft border-image fest, welches Bild wir verwenden möchten und wie es wiederholt werden soll. Wir können den Pfad zur Bilddatei mit der Funktion url() angeben und steuern, wie sich das Bild entlang des Randes wiederholt, indem wir die Werte repeat, stretch,round, oder space verwenden.
Die folgenden drei Beispiele zeigen, wie man ein Rahmenbild mit CSS wiederholt.
Beispiel 1: Verwendung eines einfachen Randbildes
In diesem Beispiel erstellen wir ein sich wiederholendes Randbild mit einem einfachen Muster. Der Rahmen wird auf das p-Element angewendet.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
p {
border: 20px solid transparent;
border-image: url('https://tutorialspoint.com/css/images/border.png') 20 repeat;
font-size: 25px;
}
</style>
</head>
<body>
<p>Using a Simple Repeated Border Image</p>
</body>
</html>
Beispiel 2 – Verwendung eines Bildes mit kreisförmigem Rand
In diesem Beispiel erstellen wir ein sich wiederholendes Randbild mit einem kreisförmigen Muster. Der Rahmen wird auf das p-Element angewendet.
<html>
<head>
<style>
body {
text-align: center;
}
p {
border: 20px solid transparent;
border-image: url('https://tutorialspoint.com/css/images/border.png') 20 round;
font-size: 25px;
}
</style>
</head>
<body>
<p>Repeating border image with a circular pattern</p>
</body>
</html>
Beispiel 3 – Verwendung räumlicher Randbilder
In diesem Beispiel erstellen wir ein sich wiederholendes Randbild mithilfe eines Musters mit einem Leerzeichen zwischen den einzelnen Wiederholungen. Der Rahmen wird auf das p-Element angewendet.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
p {
border: 20px solid transparent;
border-image: url('https://tutorialspoint.com/css/images/border.png') 60 space;
font-size: 25px;
width:500px;
height:200px;
margin:auto;
}
</style>
</head>
<body>
<p>Repeating border image with a space pattern</p>
</body>
</html>
Fazit
Die Verwendung von wiederkehrenden CSS-Rahmenbildern ist eine großartige Möglichkeit, HTML-Elementen dekorative Ränder hinzuzufügen. Mithilfe der Eigenschaft „border-image-repeat“ können wir steuern, wie sich das Randbild wiederholt, und interessante Muster und Designs erstellen.
Das obige ist der detaillierte Inhalt vonWie wiederhole ich ein Randbild mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!