0

根据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 仅显示后备渐变背景。

有谁知道为什么会这样？

4

2 回答 2

1

为了回答我自己的问题，Chrome 和 Firefox 都不支持background-position. 让我想知道他们如何相对于右下角放置背景图像......

于 2011-09-10T21:52:22.767 回答
0

原来的答案很老了，所以我想我会为任何来到这个页面的人添加一个解决方案。您可以设置多个背景位置，就像您可以设置多个背景一样。

虽然我不确定第一次提出问题时是否存在支持。

现在看来，支持相当稳定。http://caniuse.com/#feat=multibackgrounds

background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;

您用逗号分隔背景位置，按照它们在中定义的顺序background-image

于 2015-07-02T10:33:44.457 回答