2013-02-02 42 views
11

我有2个图像作为我的身体的背景:css3多背景图像的后备?

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

我发现为了显示upper_bg.png上述bg.png形象,我需要首先将其放置在列表中。然而,对于不支持多种背景的浏览器,我只想显示bg.png,我担心浏览器会降至upper_bg.png而不是bg.png。我该如何解决这个问题?

回答

20

简单地增加一个background声明与多背景前刚刚bg.png应该这样做:

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

旧的浏览器会忽略第二线并保持第一线;他们不应该尝试使用第二行的任何部分。支持多种背景的浏览器将使用第二行,而不是第一行,如同正常情况下重写它。

+0

这可以用于图像不可用的后备图像吗? (例如,具有后备轮廓的配置文件图像,但在常规处理过程中使用404s可能不是canon) – rookie1024

+0

如果我们具有用于回退的不同图像,是否会有额外的请求? – nickspiel

+0

@ rookie1024:不幸的是,没有。 IIRC有一个不同的提案,用于在图片不可访问的情况下提供回退 - 这将需要不依赖级联的不同语法,因为级联是完全不同的概念。 – BoltClock