Heim > Artikel > Web-Frontend > Wie man mit CSS zwei Hintergründe überlappen lässt
Wie man mit CSS zwei Hintergründe überlappen lässt
- 藏色散人Original
- 2021-01-12 10:17:313879Durchsuche
So überlappen sich zwei Hintergründe mit CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Verwenden Sie dann [Hintergrundbild: URL (Bildadresse), URL (Bildadresse);], um die beiden Hintergrundbilder überlappen und anzeigen zu lassen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Empfohlen: CSS-Video-Tutorial
In CSS können Sie Hintergrundbild: URL (Bildadresse), URL (Bildadresse) verwenden, um zwei Hintergrundbilder überlappen und anzeigen zu lassen.
Auf diese Weise können Sie ein schönes Ergebnis erzielen, wenn Sie die Idee haben, zwei Formen zu etwas Schönem zu verschmelzen.
Beispiel:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
background-position: center, top;
background-repeat: repeat, no-repeat;
background-size: contain, cover;
}
</style>
</head>
<body>
<!-- Your content here -->
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonWie man mit CSS zwei Hintergründe überlappen lässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!