Niquelao » Blog-Archiv » Mehrere Hintergrundbilder mit CSS3

» Archiv des Weblogs » Mehrere Hintergrundbilder mit CSS 3 Niquelao Mehrere Hintergrundbilder mit CSS 3 25. November 2009, von Rumoroso Eine der Neuerungen, die CSS 3 einführt (und die ich persönlich begrüße), ist die Möglichkeit, mehrere Hintergrundbilder für ein und dasselbe Element einzubinden ( http://www.w3.org/TR/css3-background/#layering ).

Bisher konnten wir, wenn wir mehr als ein Bild als Hintergrund kombinieren wollten, nur vorhandene Elemente auf unserer Seite nutzen und jedem davon einen Hintergrund zuweisen, um das gewünschte Ergebnis zu erzielen. Manchmal griffen wir sogar auf zusätzliches Markup zurück, was die Qualität der Website beeinträchtigte, da wir Markup rein zu Präsentationszwecken hinzufügten. Doch jetzt ändert sich das… Dank CSS 3 können wir bei Verwendung von zwei oder mehr Hintergrundbildern der Eigenschaft background-image: einfach den Pfad zu jedem Bild hinzufügen und diese durch Kommas trennen.

Zum Beispiel: background-image: url('fondo1.png'), url('fondo2.png') Mit etwas so Einfachem wie diesem haben wir alles deklariert, damit das Element, auf das wir es anwenden, beide Bilder als Hintergrund erhält. Natürlich tauchen ab diesem Punkt neue Fragen auf… Überlagern sie sich? Können sie an verschiedenen Positionen platziert werden?

Kann eines entlang einer Achse wiederholt werden, während das andere dies nicht tut? … …und auf alle lautet die Antwort JA . Was die Überlagerung betrifft: Das zuerst deklarierte Bild wird dem Benutzer am nächsten angezeigt . Dahinter (auf einer zur Bildschirmoberfläche senkrechten Achse) folgt das nächste, dann das übernächste und so weiter bis zum letzten, welches ganz hinten liegt.

Es ist, als ob jedes Bild in einer eigenen Ebene platziert würde. Falls zusätzlich eine Hintergrundfarbe definiert wird, erscheint diese hinter allen verwendeten Bildern.

Bezüglich der übrigen Fragen kann ich eine verallgemeinerte Antwort geben, denn alle entstanden beim Nachdenken über die Eigenschaften, die wir gewöhnlich verwenden: nämlich die Position des Hintergrundbildes (background-position), das Verhalten beim Scrollen (background-attachment) und die Wiederholung (background-repeat). Wenn wir für jedes Bild einen bestimmten Wert festlegen möchten, müssen wir diese einfach nacheinander und durch Kommas getrennt deklarieren (genau wie zuvor bei den Bildern selbst).

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Zum Beispiel: background-image: url('fondo1.png'), url('fondo2.png'), url('fondo3.png'); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; Damit deklarieren wir drei Hintergrundbilder: Das erste wird oben links positioniert, das zweite um 150px nach rechts und 200px nach unten verschoben, und das dritte ebenfalls links und vertikal zentriert. Hinsichtlich der Wiederholung werden das erste und das letzte Bild nicht wiederholt, während das zweite horizontal wiederholt wird.

Doch damit ist das Thema noch nicht abgeschlossen. Für alle, die gerne ihren Code optimieren (was wir eigentlich alle sein sollten), lassen sich einige Deklarationen verkürzen: background-position: 0 0, 150px 200px, left center; wird zu: background-position: 0 0, 150px 200px, left; Das Wort center entfällt. Wie wir alle wissen (oder wissen sollten), wird bei fehlendem Positionsstandardwert automatisch center angenommen – in diesem Fall vertikal. background-repeat: no-repeat, repeat-x, no-repeat; wird zu: background-repeat: no-repeat, repeat-x; Der dritte Wert kann weggelassen werden.

Der Grund dafür ist, dass bei fehlenden Werten die Liste der bereits definierten Werte solange wiederholt wird, bis pro Bild ein Wert vorhanden ist (daher beginnt die Wertliste gegebenenfalls erneut, wobei der erste Wert no-repeat ist). Doch es lässt sich noch weiter optimieren, indem man die Shorthand-Eigenschaft background: nutzt: : background: url('fondo1.png') 0 0 no-repeat, url('fondo2.png') 150px 200px repeat-x, url('fondo3.png') left no-repeat; Wie Sie sehen, eröffnet all dies völlig neue Gestaltungsmöglichkeiten für unsere Designs.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Einige Browser unterstützen in ihren aktuellen Versionen bereits mehrere Hintergrundbilder. Dazu gehören Firefox (ab Version 3.6), Chrome , Safari und Konqueror . Falls Sie einen dieser Browser verwenden, können Sie das Ergebnis im von mir erstellten Beispiel betrachten .

Leider gibt es bislang keine Unterstützung in Internet Explorer (ob dies in der zukünftigen Version 9 integriert wird, bleibt abzuwarten) sowie in Opera. Nachfolgend finden Sie einen Screenshot, der zeigt, wie das Beispiel bei unterstützenden Browsern aussieht (falls Sie einen Browser ohne Unterstützung verwenden, sehen Sie lediglich den gepunkteten Rahmen): Abgesehen vom bisher Gesagten führt CSS 3 auch neue Werte für einige der genannten Eigenschaften ein sowie zusätzliche Eigenschaften, die unseren Designs große Flexibilität verleihen.

In einem kommenden Artikel werde ich diese detailliert behandeln. Um Ihnen schon einmal Appetit zu machen, erwähne ich background-size … ja, genau das denken Sie! Hinweis: Ich nehme an, neben dem technischen Inhalt des Artikels ist das Verlockendste die Torte auf dem Foto . Um Ihnen ein wenig Neid zu machen, verrate ich Ihnen, dass ich das Foto selbst gemacht habe und es sich um eine Fruchttorte handelt, die Dolores für mich zubereitet hat… Es ist offensichtlich, dass sie sich ebenfalls hervorragend auf Präsentation versteht, aber ich garantiere Ihnen zudem, dass sie auch Content-Management beherrscht, denn die Torte war köstlich… Mehrere Hintergrundbilder mit CSS 3 Kategorie: CSS —> 4 Kommentare Mehrere Hintergrundbilder mit CSS 3 26.

November 2009 […] jetzt ändert sich das… Mehrere Hintergrundbilder mit CSS 3 […] Tweets, die Niquelao » Archiv des Weblogs » Mehrere Hintergrundbilder mit CSS3 erwähnen — Topsy.com 27. November 2009 […] Dieser Beitrag wurde auf Twitter von Jorge Rumoroso und Juanjo Fernández erwähnt.

Juanjo Fernández sagte: RT @rumoroso: #niquelao Mehrere Hintergrundbilder mit CSS 3 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Archiv des Weblogs » CSS 3: Hintergrund-Eigenschaften 2. Dezember 2009 […] Unterstützung in den aktuellsten Browserversionen (wie ich bereits im Beitrag mit dem Titel Mehrere Hintergrundbilder mit CSS 3 erwähnt habe), wobei dies in einigen Fällen experimentell erfolgt (beispielsweise in Firefox mittels Präfix […] Niquelao » Archiv des Weblogs » Mehr über CSS 3: background-origin und background-clip 13.

Dezember 2009 […] wie ich in einem anderen Artikel bereits erläutert habe, ermöglicht CSS 3 die Verwendung mehrerer Hintergrundbilder. Die Eigenschaften background-origin und background-clip akzeptieren jeweils einen Wert pro […] Sie können den Kommentaren dank des RSS 2.0 Feeds folgen. Ebenso können Sie einen Trackback von Ihrer Website senden.

Related: IAAP CPACC / WAS Certification — La certificación profesional que acredita tu experiencia en accesibilidad.

Vorheriger Artikel: Ein weiterer stilistischer Touch im CSS-Kurs Nächster Artikel: CSS 3: Hintergrund-Eigenschaften —> —> —> Dieses Werk steht unter einer Creative Commons-Lizenz .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.