根据QuirksMode，定义多个背景适用于（至少）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;
这是一个相当复杂的背景，但它是为我的在线游戏制作一个“黑暗世界”的背景效果。基本上它是三个不同的“地面”层，一个渐变的天空，两个“边缘”，可以淡出屏幕两侧的地面和闪电。较旧的浏览器应该只看到“黑暗的天空”渐变背景 产生的效果应为：Screenshot。
现在问题是：IE9完美地显示了这个效果，甚至可以做可选的“动画背景”效果，其中地面层以视差方式滚动，闪电和CSS变换扭曲。但是，Firefox 6和Chrome 13仅显示仅回退渐变背景。
有没有人知道为什么会这样？
答案 0 :(得分：1)
要回答我自己的问题，Chrome和Firefox都不支持background-position中的两个以上的值。让我想知道他们如何将背景图像相对于右下角放置......
答案 1 :(得分：0)
原来的答案已经很老了，所以我想我会为任何人来这个页面添加一个解决方案。您可以设置多个背景位置，就像您可以设置多个背景一样。
虽然我不确定在第一次提出问题时是否存在支持。
现在看来支持相当稳定。 http://caniuse.com/#feat=multibackgrounds
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
您可以按照background-image