So fügen Sie zwei Hintergrundbilder gleichzeitig in CSS ein

Wenn Sie mehrere Hintergrundbilder verwenden, trennen Sie zunächst die Werte des Attributs „Hintergrundbild“ durch Kommas und listen Sie die zu verwendenden Bilder auf. Verwenden Sie dann „Hintergrundwiederholung“, um die wiederholten Attribute zu definieren die Position jedes kleinen Bildes.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Wenn Sie mehrere Hintergrundbilder verwenden, trennen Sie einfach die Werte des Attributs „Hintergrundbild“ durch Kommas, listen Sie die Bilder auf, die Sie verwenden möchten, definieren Sie dann das Attribut „Wiederholung“ mit „Hintergrundwiederholung“ und definieren Sie es schließlich mit „Hintergrundposition“. die Position jedes kleinen Bildes.

HTML-Code:

<div></div>

CSS-Code:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

scroll_middle.jpg

scroll_bottom.jpg

Verwenden Sie „background-repeat“ und „background-position“, um mehrere zu definieren Wert, die definierte Reihenfolge entspricht jeweils der Reihenfolge des Hintergrundbildes.

Abkürzung:

Der oben definierte Weg kann verwirrend sein, insbesondere wenn er später neu angeordnet oder gewartet werden muss. Daher verwenden viele Webdesigner gerne Abkürzungen, um mehrere Hintergrundbilder anzugeben.

CSS-Code:

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

Jedes Mal, wenn Sie ein Bild mit einer URL definieren, werden die Position und die Wiederholungsmethode des Bildes definiert.

Wichtige Punkte:

Mehrere Hintergrundbilder werden übereinander gestapelt, genau wie die Ebenen in Photoshop. Die Reihenfolge, in der die Hintergrundbilder aufgelistet sind, bestimmt, welches Bild oben angezeigt wird. Das erste aufgelistete Bild befindet sich auf der obersten Ebene, das zweite Bild auf der zweiten Ebene und das letzte Bild auf der untersten Ebene. Am Beispiel des vorherigen Codes befindet sich der obere Teil der Schriftrolle (scrollTop.jpg) über dem unteren Rand der Schriftrolle (scrollBottom.jpg) und der untere Teil über der Mitte der Schriftrolle (scrollMiddle.jpg).

Das obige ist der detaillierte Inhalt vonSo fügen Sie zwei Hintergrundbilder gleichzeitig in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!