Implementierung mehrerer Hintergründe durch gemeinsame Nutzung von CSS3-Beispielen

Jeder sollte mit dem Hintergrundattribut background-image vertraut sein. In CSS2 gehören zu den zugehörigen Attributen background-repeat (wie man festlegt, ob der Hintergrund wiederholt wird und wie er wiederholt wird). it) ), background-position (Legen Sie die Position des Hintergrundbilds im Container fest), background-attachment (legen Sie fest, ob der Hintergrund mit der Seite scrollt), verwenden Sie diese Attribute, um Steuern Sie die Position des Hintergrundbilds im Container. Wie wird es im Container angezeigt? Wir können jedoch nur ein Hintergrundbild für den Container bereitstellen. Wenn wir mehrere Bilder für den Hintergrund eines Containers verwenden möchten, wie sollen wir das tun? Fügen Sie dem Container einige nutzlose Elemente hinzu?

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 nur in einem innerhalb des Containers platziert werden können Blockelement.

Werfen wir zunächst einen Blick auf die Syntax:

Hintergrund: [Hintergrundbild] | [Hintergrundursprung] | [background-repeat] |. [background-size] | Wenn es mehrere Hintergrundbilder und nur ein anderes Attribut gibt (z. B. nur eine Hintergrundwiederholung), wird dieser Attributwert auf alle Hintergrundbilder angewendet.

Schauen wir uns ein Beispiel an:

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

HTML-Code :

Der Code lautet wie folgt:

Script House

CSS-Code:

Code wie folgt:

.p1{

margin:50px auto;

width:700px;
height:450px;
border:10px dashed #ff00ff;

Hintergrundbild:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5 .jpg) ;
Hintergrundwiederholung:keine-Wiederholung,keine-Wiederholung,keine-Wiederholung,keine-Wiederholung,keine-Wiederholung;
Hintergrundposition:oben links,oben rechts,unten links,unten rechts, center center;
}


Der Effekt ist wie folgt:

Im obigen Code gibt es diesen Satz:

Der Code lautet wie folgt:

background-repeat:no-repeat;

Schreiben Sie einfach einen Wert, der Effekt ist genau das 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:

Der Code lautet wie folgt:

.p1{

...

background: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 Center Center;
...
}


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

Das obige ist der detaillierte Inhalt vonImplementierung mehrerer Hintergründe durch gemeinsame Nutzung von CSS3-Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!