Google chrome CSS3多重背景？

据介绍，定义多个背景在（至少）IE9、Chrome和Firefox 3.6中起作用。
我有以下CSS：

background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;

这是一个相当复杂的背景，但它的目的是为我的在线游戏制作一个“黑暗世界”的背景效果。从本质上讲，它是三个不同的“地面”层，一个渐变天空，两个“边缘”在屏幕两侧逐渐淡出地面，还有闪电。较旧的浏览器应该只看到“黑色天空”渐变背景。
结果应为：

现在问题来了：IE9完美地显示了这种效果，甚至可以实现可选的“动画背景”效果，其中地面层以视差方式滚动，闪电和CSS变换扭曲。然而，Firefox6和Chrome13只显示后退渐变背景

---

有人知道为什么会发生这种情况吗？

回答我自己的问题，Chrome和Firefox在

背景位置都不支持两个以上的值。让我想知道他们会如何放置相对于右下角的背景图像…
原始答案很旧，所以我想我会为任何来到本页的人添加一个解决方案。可以设置多个背景位置，就像可以设置多个背景一样

虽然我不确定第一次问这个问题时是否有支持

现在看来，支持率相当稳定

通过逗号分隔背景位置，按照它们在
背景图像
中定义的顺序，它看起来像是一个chrome bug或未实现的场景，尽管这是在上，但当
背景位置
具有2个以上的值时，即使我们在单独的属性中输入该值，它也会失败。避免完全失败的一种方法是从速记中提取所有
背景位置
片段，并将它们放在它们自己的属性上，然后只有
背景属性
将失败，而不是整个背景。我宁愿“备份”梯度只在多高的位置，而不是因为缺少定位而破坏背景。嘿，Alex，谢谢你的回答，但恐怕这不能回答这个问题；）虽然我的问题提得不好，但实际上是关于单个背景图像的定位，比如说，距离右下角16像素。你应该能够将
右16px底部0
作为背景位置，但在发布时，Chrome和Firefox都不支持这一点。我相信他们现在知道了，但我还没有检查。啊，我明白了。（无论如何，我可能没有完全正确地阅读它。我的错！）无论如何，我将留下这个答案：）我现在明白你的意思了。我知道您可以指定像素
背景位置：25px 150px
，但我相信这总是从左上角开始的，正如您所提到的。不是从右边或下面。（实际上，我以前从未见过这种语法）。如果使用Javascript，可以进行简单的计算（尽管这并不总是适用于所有情况的有效解决方案）。我不知道任何允许底部和右侧对齐的浏览器更新，尽管我还没有完全检查。谢谢你的回复
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;