css3多个背景图像的后备?

Ilj*_*lja 11 css background background-image css3

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

background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;
Run Code Online (Sandbox Code Playgroud)

我发现为了显示upper_bg.png上面的bg.png图像,我需要将它放在列表中的第一位.然而,对于不支持多个背景的浏览器,我只想展示bg.png,我担心浏览器会upper_bg.png落后而不是bg.png.我该如何解决这个问题?

Bol*_*ock 21

只需background在多个背景之前添加一个只有bg.png 的声明就可以了:

background: url(../img/bg.png) repeat;
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;
Run Code Online (Sandbox Code Playgroud)

较旧的浏览器将忽略第二行并保留第一行; 他们不应该试图使用第二行的任何部分.支持多个背景的浏览器将使用第二行而不是第一行通过正常覆盖它.