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

【问题标题】：Layering images in CSS - possible to put 2 images in same element?在 CSS 中分层图像 - 可以将 2 个图像放在同一个元素中吗？
【发布时间】：2010-09-28 23:13:48
【问题描述】：

假设我在 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 轴的唯一方法？

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

谢谢！

【问题讨论】：

字体大小：62.5%； /* 将 1em 重置为 10px */ 没有这样的事情。
是的，抱歉 - 属性旁边的注释是残留的。感谢您指出，您提醒我删除它！
"不做这样的事情" != "只有大约 97% 的时间这样做"
Can I have multiple background images using CSS? 的可能重复项

标签： css image layout z-index

【解决方案1】：

唯一的方法是使用另一个容器。每个元素只能包含一张背景图片。

【讨论】：

【解决方案2】：

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

希望这会有所帮助！

【讨论】：

我想，但这是一个希望！谢谢，我会用 div 块来做的。
没问题！也许CSS4会引入这样的东西？随着 CSS 和 HTML 的发展方向，人们希望使用越来越少的 HTML 对象来设置页面样式。一个人可以做梦，对吧？ :)
实际上，在 CSS3 中，通过边框图像 - 请参阅 w3.org/TR/2002/WD-css3-border-20021107（AFAIK，虽然只有 Safari 和 FF3.1 支持）

【解决方案3】：

使用绝对定位和 z-index 来获取顶部的第二个元素。

【讨论】：

【解决方案4】：

不要忘记您可以将样式应用于 HTML 元素：

html {
background: url(images/whatever.gif);
}

【讨论】：

【解决方案5】：

分层背景是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;
}

【讨论】：

【解决方案6】：

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

据我所知，不可能将其放在同一层，但可以将多个图像放在单独的 div 中，并已由流行的可用性测试网站 Silverback 实现（检查背景以了解它是如何分层的）。如果您查看源代码，您会发现背景是由几张图片组成的，它们相互叠加。

这里是演示如何做效果的文章可以在Vitamin上找到。可以在A List Apart 上找到用于包裹这些“洋葱皮”层的类似概念。

【讨论】：

这是一个比“接受”的答案更有用的答案。

【解决方案7】：

link text

上面提到的链接最能描述你的目标......

【讨论】：

【解决方案8】：

现在这可以在所有“现代”浏览器（不是

对于您可以选择的语法

背景：url（..）重复-x左上角， url(..) 重复-x 左下角；

和

背景图像：url（..），url（..）；背景位置：左上，左下；背景重复：重复-x；

你不需要换行符，但逗号很重要。

注意！以下将创建两个背景，即使您只指定了一个图像 url：

背景图片：网址（..）；背景位置：顶部，底部；

当然，还有使用嵌套容器的替代方法，但这会使您的 html 膨胀。

【讨论】：