2013-02-02 11 views
11

Ich habe 2 Bilder als Hintergrund meines Körpers bekommt:Fallback für css3 mehrere Hintergrundbilder?

background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat; 

ich, dass ich in Ordnung fand heraus upper_bg.png oben bg.png Bild zu zeigen, benötigen es in der Liste zuerst zu platzieren. Aber für Browser, die nicht mehrere Hintergründe unterstützen möchte ich nur bg.png zeigen, bin ich besorgt, dass Browser upper_bg.png als Fallback statt bg.png fällt. Wie kann ich dieses Problem beheben?

Antwort

20

einfach das Hinzufügen einer background Erklärung mit nur bg.png vor den mehreren Hintergründen sollte es tun:

background: url(../img/bg.png) repeat; 
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat; 

älterer Browser wird die zweite Zeile ignorieren und die erste Zeile halten; Sie sollten nicht versuchen, irgendeinen Teil der zweiten Zeile zu benutzen. Browser, die mehrere Hintergründe unterstützen, verwenden die zweite Zeile anstelle der ersten Zeile, indem sie sie wie üblich überschreiben.

+0

Könnte dies für Fallback-Bilder funktionieren, bei denen das Bild nicht verfügbar ist? (z. B. Profilbilder mit einer Fallback-Silhouette, obwohl die Verwendung von 404s während der regulären Verarbeitung wahrscheinlich kein Kanon ist) – rookie1024

+0

Würde es eine zusätzliche Anforderung geben, wenn wir ein anderes Bild für den Fallback hätten? – nickspiel

+0

@ rookie1024: Leider nein. IIRC gibt es einen anderen Vorschlag für die Bereitstellung von Fallbacks im Falle von unerreichbaren Bildern - das würde eine andere Syntax erfordern, die nicht auf Kaskadierung angewiesen ist, da Kaskadierung ein völlig anderes Konzept ist. – BoltClock

Verwandte Themen