css - 在 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 元素本身的 desk.gif 之上叠加第二张图片，或者是创建一个单独的类并使用 z 轴的唯一方法吗？

抱歉，这是一个头脑简单的问题，但我一直在努力解决这个问题，虽然我无法让它发挥作用，但我也没有在网上的任何地方找到对这个想法的明确抨击......那么，有没有办法，或者这只是一个不能做的事情？

谢谢!

Answer 1

分层背景是 CSS3 Working Draft 的一部分但据我所知，对它们的支持仅限于基于 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;
}