Wie Multiple Bild CSS3 Hintergrund zu erstellen

Es ist möglich, mehrere Bilder zu einem einzigen Bild zu kombinieren, wenn sie mit CSS3-fähigen Browsern. Mindestens eines der Bilder müssen transparente Bereiche aufweisen, die das zweite Bild ermöglichen, von dahinter Blick aus. Das folgende Verfahren modifiziert das Singleimage Beispiel zwei Bilder enthalten. Das zweite Bild wird mit herunterladbaren Quelle als PawPrint.GIF geliefert.

Sie können jedoch leicht ein Bild von Ihren Wünschen zu ersetzen, statt (solange das Bild die erforderlichen transparente Bereiche).

1. Öffne das SingleImage.CSS Datei.

2. Ändern Sie den Körper Stil, so dass die Eigenschaft background-image jetzt zwei Bilder enthält, wie hier gezeigt.

   body {background-image: url ( "PawPrint.gif"), url ( "CuteCat.jpg") - background-color: Saddle-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px Gelb- }

   Beachten Sie, dass die beiden Bild Einträge durch ein Komma getrennt werden - nicht viele Multi-Entry-Eigenschaften erfordern Kommas, aber dies ist einer von ihnen. Die Reihenfolge, in der die Bilder angezeigt ist ebenfalls wichtig. Das Bild der Transparenz enthält, muss zuerst erscheinen, weil es Anfang des zweiten Bildes erscheint über. Wenn Sie die Einträge umkehren, die Bild Folien fehlen wird oben sein, und Sie werden nur ein Bild zu sehen.

3. Speichern Sie die CSS-Datei als MulitpleImage.CSS.

4. Öffnen Sie die Datei SingleImage.HTML.

5. ändern Sie die

6. Speichern Sie die HTML-Datei als MultipleImage.HTML.

7. Laden Sie die MultipleImage Seite.

   Sie sehen den Hintergrund. Beachten Sie, wie die Pfote druckt das Originalbild überlagern aber nicht verbergen es vollständig.