CSS3多重背景？

根据QuirksMode，定义多个背景（至少）在IE9，Chrome和Firefox 3.6中起作用。
我有以下的CSS：CSS3多重背景？

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

有没有人有任何想法，为什么会发生这种情况？

来源

2011-09-07 Niet the Dark Absol

定义它看上去就像一个铬错误或不落实scenarion，虽然这是[CSS3文件]上（HTTP ：//www.w3.org/TR/css3-background/#background-position），即使我们在一个单独的属性中输入了'background-position'，它也会失败。一种避免完全失败的方法是从速记中提取所有的“background-position”部分，并将它们放在它们自己的属性上，然后只有'background-property'会失败，而不是整个背景。 – Luizgrs

我宁愿有“备份”渐变 - 只有如何，比缺乏定位打破的背景。 –

要回答我自己的问题，Chrome和Firefox都不支持background-position以上的两个值。让我想知道他们如何将相对于右下角的背景图像...

来源

2011-09-10 21:52:22

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

尽管我不确定问题首次被问到时是否存在支持。

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

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

您用逗号分隔的背景位置，他们的顺序是在background-image

来源

2015-07-02 10:33:44

嗨，亚历克斯，感谢您的回答，但我恐怕这并不能回答这个问题;）尽管我的确提出了这个问题，但它实际上是将单个背景图像放置在距离右下角16像素处。您应该能够将“正确的16px底部0”作为背景位置，但是在发布Chrome和Firefox时都不支持这一点。我相信他们现在做，但我没有检查。 –

啊，我明白了。（我可能没有完全正确地阅读它，我的坏！）我会离开这个答案:) 我明白你的意思了。我知道你可以指定像素'background-position：25px 150px'，但我相信这总是从左上角开始，正如你所提到的。不是从右边或底部。（我之前没有遇到过这种语法）。如果使用Javascript，可以进行简单的计算（尽管对于所有情况这并不总是有效的解决方案）。我不知道任何允许底部和右侧对齐的浏览器更新，虽然我没有完全检查。谢谢回复 –

CSS3多重背景？

回答

相关问题