在CSS中分层图像 - 可以将2个图像放在同一个元素中？

Question

假设我在CSS中为网页设置背景图像,如下所示:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

有没有办法在body元素本身的桌面上层叠第二个图像,或者是创建单独的类并使用z轴的唯一方法？

对不起,这是一个简单的问题,但我一直试图解决这个问题,虽然我无法使其发挥作用,但我还没有在网上找到一个明确的想法,所以,是的有办法,还是这只是一个无法做到的？

谢谢!

Answer 1

分层背景是CSS3工作草案的一部分,但据我所知,对它们的支持仅限于基于WebKit/KHTML的浏览器,如Safari,Chrome,Konqueror和OmniWeb.

使用您的示例代码,这将看起来像:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Answer 2

我已经在一个重复的问题中发布了解决方案,但对于可能需要此信息的任何人,我也会在此处发布.

据我所知,不可能将它放在同一层,但可以将几个图像放在彼此之上的单独div中,并且已经由流行的可用性测试网站Silverback实现(请查看背景信息)看看它是如何分层的).如果查看源代码,您可以看到背景由多个图像组成,彼此叠加.

这篇文章展示了如何在维生素上找到效果.在A List Apart上可以找到用于包裹这些"洋葱皮"层的类似概念.

Answer 3

简而言之，这是不可能的。您可以执行此操作，但需要向页面添加第二个 HTML 对象才能使其正常工作。例如，在身体正下方放置一个 div 块，并将第二个背景分配给该对象。

希望这可以帮助！