css - css3多个背景图像的后备？

Question

我有两张图片作为我身体的背景：

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. 我该如何解决这个问题？

Answer 1

只需在多个背景之前添加一个background带有 bg.png 的声明即可：

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

较旧的浏览器会忽略第二行而保留第一行；他们根本不应该尝试使用第二行的任何部分。支持多个背景的浏览器将使用第二行而不是第一行，方法是照常覆盖它。