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:

Code kopieren Der Code lautet wie folgt:

Script House

CSS-Code:

Code kopieren Der Code lautet wie folgt:

.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;

background-image:url(images/1.jpg),url(images/2 .jpg) ,url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat, no-repeat ,no-repeat;
Hintergrundposition:oben links,oben rechts,unten links,unten rechts,Mitte Mitte;
}

Der Effekt ist wie folgt:

Im obigen Code gibt es diesen Satz:

Code kopieren Der Code lautet wie folgt:

background-repeat:no-repeat;

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:

Code kopieren Der Code lautet wie folgt:

.div1{
...
Hintergrund:url(images/1.jpg) no-repeat oben links,
url(images/2.jpg) no-repeat oben rechts,
url(images/3.jpg) no-repeat unten links,
url(images/4.jpg) no-repeat unten rechts,
url(images/5.jpg) no-repeat Mitte Mitte;
...
}

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.