Implementierung mehrerer Hintergründe durch gemeinsame Nutzung von CSS3-Beispielen (Mehrere Hintergründe)_CSS/HTML

Die Geburt von CSS3 hat dieses Problem für uns gelöst. In CSS3 können mehrere Hintergrundbilder für einen Container durch „Hintergrundbild“ oder „Hintergrund“ festgelegt werden, was bedeutet, dass unterschiedliche Hintergrundbilder in nur einem Blockelement platziert werden können.

Werfen wir zunächst einen Blick auf die Grammatik:

Hintergrund: [Hintergrundbild] |. [Hintergrundwiederholung] | 🎜>

Verwenden Sie Kommas, um die URLs mehrerer Hintergrundbilder zu trennen und es nur ein anderes Attribut gibt (z. B. nur eine Hintergrundwiederholung), wird dieser Attributwert auf alle Hintergründe angewendet Bilder.

Schauen wir uns ein Beispiel an:

Hier verwenden wir 5 Bilder als Hintergrund eines Div-Containers. Schauen wir uns den Code an:

HTML-Code:

CSS-Code:

Der Effekt ist wie folgt:

Im obigen Code gibt es diesen Satz:

Schreiben Sie einfach einen Wert, der Effekt ist genau der gleiche.

Natürlich werden die verschiedenen Attribute des Hintergrundbilds oben separat geschrieben, sodass wir die verschiedenen Attribute des Hintergrundbilds auch zusammen schreiben können. In diesem Fall lautet der CSS-Code wie folgt:

Oh, so funktionieren mehrere CSS3-Hintergründe. Es ist ganz einfach. Nachfolgend finden Sie den vollständigen Quellcode und Beispiele, die als Referenz verwendet werden können.