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

StackOverflow https://stackoverflow.com/questions/402200

  •  03-07-2019
  •  | 
  •  

题

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

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

谢谢！

有帮助吗？

解决方案

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

希望这有帮助！

其他提示

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

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

据我所知，不可能将它放在同一层中，但可以将多个图像放在不同的div中，并且已由流行的可用性测试网站实现 Silverback （查看背景以了解它是如何分层的）。如果你仔细查看源代码，就可以看到背景是由多个图像组成的，放在一起。

这篇文章演示如何在维生素。用于包装这些“洋葱皮”层的类似概念可以在 A List Apart 上找到。

现在可以在所有<！> quot; modern <！>中做到这一点。浏览器（不是<！> lt; IE9，afaik）。我可以确认它适用于Firefox，Opera，Chrome。没有理由不这样做，只要你有一个适合旧浏览器/ IE的倒退解决方案。

有关语法，您可以选择

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

和

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

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

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

  background-image:url(..);
  background-position:top, bottom;

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

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

使用绝对定位和z-index将第二个元素放在最上面。

链接文字

上面提到的链接最能说明你最喜欢的......

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

html {
background: url(images/whatever.gif);
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top