16

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

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

谢谢！

4

8 回答 8

6

分层背景是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;
}
于 2009-01-04T21:27:46.457 回答
5

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

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

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

于 2009-01-08T03:54:32.603 回答
4

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

希望这可以帮助！

于 2008-12-31T03:16:44.770 回答
1

如今，这可以在所有“现代”浏览器（不是< IE9，afaik）中完成。我可以确认它适用于 Firefox、Opera、Chrome。没有理由不这样做，只要你有一个适合旧浏览器/IE 的后备解决方案。

对于语法，您可以选择

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

和

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

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

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

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

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

于 2010-11-15T01:50:15.277 回答
0

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

于 2008-12-31T03:12:38.007 回答
0

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

于 2008-12-31T03:34:50.537 回答
0

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

html {
background: url(images/whatever.gif);
}
于 2008-12-31T04:17:39.107 回答
0

链接文本

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

于 2010-10-25T07:00:51.507 回答