在 CSS 中分层图像 - 可以将 2 个图像放在同一个元素中吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/402200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Layering images in CSS - possible to put 2 images in same element?
提问by
Supposing I'm setting a background image for a web page in CSS like this:
假设我在 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;
}
Is there any way to layer a second image on top of the desk.gif within the body element itself, or is the only way to create a separate class and use the z axis?
有什么方法可以在 body 元素本身内的 desk.gif 顶部放置第二张图像，还是创建单独的类并使用 z 轴的唯一方法？
Sorry, it's a simpleminded question, but I've been trying to figure this out and though I haven't been able to make it work, I also haven't found a clear slapdown of the idea anywhere online... so, is there a way, or is this just a no can do?
抱歉，这是一个头脑简单的问题，但我一直在试图解决这个问题，虽然我无法让它发挥作用，但我也没有在网上的任何地方找到一个明确的想法......所以，是有没有办法，或者这只是一个不能做的？
Thanks!
谢谢！
采纳答案by Mike B
In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.
简而言之，这是不可能的。您可以这样做，但您需要向页面添加第二个 HTML 对象才能使其工作。因此，例如，在您的身体正下方放置一个 div 块，并将第二个背景分配给该对象。
Hope this helps!
希望这可以帮助！
回答by scronide
Layered backgrounds are part of the CSS3 Working Draftbut, as far as I know, support for them is limited to WebKit/KHTML-based browsers such as Safari, Chrome, Konqueror and OmniWeb.
分层背景是CSS3 工作草案的一部分，但据我所知，对它们的支持仅限于基于 WebKit/KHTML 的浏览器，例如 Safari、Chrome、Konqueror 和 OmniWeb。
Using your example code, this would look like:
使用您的示例代码，这看起来像：
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;
}
回答by Mike B
I've already posted the solution in a duplicate question, but for anyone that may require this information I'll post it here as well.
我已经在一个重复的问题中发布了解决方案，但对于可能需要此信息的任何人，我也会将其发布在这里。
As far as I am aware it is not possible to put it in the same layer, but it is possible to put several images in separate div's on top of one another, and has been implemented by popular usability testing website Silverback(check the background to see how it has been layered). If you look through the source code you can see that the background is made up of several images, placed on top of one another.
据我所知，不可能将它放在同一层中，但可以将多个图像放在单独的 div 中，并由流行的可用性测试网站Silverback 实现（查看背景以看看它是如何分层的）。如果您查看源代码，您会发现背景由多个图像组成，并叠放在一起。
Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.
这里是展示如何做可以在维生素上找到效果的文章。可以在A List Apart上找到用于包装这些“洋葱皮”层的类似概念。
回答by donquixote
Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.
如今，这可以在所有“现代”浏览器（不是 < IE9，afaik）中完成。我可以确认它适用于 Firefox、Opera、Chrome。没有理由不这样做，只要您对旧浏览器/IE 有一个不错的后备解决方案。
For the syntax you can choose between
对于语法，您可以选择
background:url(..) repeat-x left top,
url(..) repeat-x left bottom;
and
和
background-image:url(..), url(..); background-position:left top, left bottom; background-repeat:repeat-x;
You don't need the linebreaks, but the comma is important.
您不需要换行符，但逗号很重要。
Attention! The following will create two backgrounds, even though you specified only one image url:
注意力！即使您只指定了一个图像 url，以下内容也会创建两个背景：
background-image:url(..); background-position:top, bottom;
And of course, there is the alternative to use nested containers, but this will bloat your html.
当然，还有使用嵌套容器的替代方法，但这会使您的 html 膨胀。
回答by booota
回答by codeinthehole
Use absolute positioning and a z-index to get the second element on top.
使用绝对定位和 z-index 来获取顶部的第二个元素。
回答by Andy Ford
Don't forget you can apply styles to the HTML element:
不要忘记您可以将样式应用于 HTML 元素：
html {
background: url(images/whatever.gif);
}
回答by Will Bickford
The only way is to use another container. Each element may contain only one background image.
唯一的方法是使用另一个容器。每个元素可能只包含一个背景图像。
