2

有没有办法仅使用一个 div 覆盖/重叠两个或多个图像？我想要在我的 css 中这样的东西：

#nice_container {
    background: url('nice_background.jpg') repeat-y z(0);
    background: url('nice_logo.jpg') top left no-repeat z(1);
}

其中 z(#) 将是 z-index，然后我会使用一个不错的<div id="nice_container">...</div>

编辑

感谢您的快速回答！这是解决方案。

4

7 回答 7

2

使用 css3，您可以在 css 中使用多个背景

http://www.css3.info/preview/multiple-backgrounds/

但不是每个浏览器都能处理它！Firefox 从 3.6 版（Gecko 1.9.2）开始支持多种背景，从 1.3 版开始支持 Safari，从 10 版开始支持 Chrome，从 10.50 版（Presto 2.5）开始支持 Opera，从 9.0 版开始支持 Internet Explorer。

例子 ：

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

或者：

#exampleA {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-   repeat, url(old_paper.jpg) left top no-repeat;
}

我想您定义背景图像的顺序是堆栈的顺序

于 2012-04-11T09:32:50.863 回答
1

您可以像这样使用CSS3多重背景编写：

background: url('nice_background.jpg') repeat-y , background: url('nice_logo.jpg') top left no-repeat;

但它不适用于 IE8 及以下版本。

检查这个http://www.sitepoint.com/mastering-css3-multiple-backgrounds/#fbid=Mg9Q6GSmvXB

于 2012-04-11T09:33:29.493 回答
1

只有 css3 支持多种背景 - 所以取决于您需要的浏览器支持

http://www.css3.info/preview/multiple-backgrounds/

Firefox 从 3.6 版（Gecko 1.9.2）开始支持多种背景，从 1.3 版开始支持 Safari，从 10 版开始支持 Chrome，从 10.50 版（Presto 2.5）开始支持 Opera，从 9.0 版开始支持 Internet Explorer。

于 2012-04-11T09:34:28.070 回答
1

所以谢谢大家的快速回答！它是这样工作的：

 #nice_container {
     background: url('nice_logo.jpg') top left no-repeat,
                 url('nice_background.jpg') repeat-y
 }

请注意，您必须先编写较小或透明的背景图像（最终背景位于行尾）。感谢您帮助达成解决方案！

于 2012-04-12T00:34:14.960 回答
0

这可能会指明方向

div.test {
    background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
    background-repeat: repeat-y;
    background-position: top left, top right;
    width: 385px;
    height: 100px;
    border: 1px solid #000000;
}
于 2012-04-11T09:35:08.340 回答
0

如果你想覆盖两个图像，并且你想让它在每个浏览器中工作，你可以做这样的事情（但它不再是一个 div）：

<img src="img1.png" style="background-image: url(img2.png)"/>
于 2012-04-11T09:35:16.560 回答
0

CSS3 允许我们在一个 div 中指定多个背景图像，只使用一个简单的逗号分隔列表。

#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

有关更多详细信息，您可以在此处阅读： * CSS3 的多个背景*

于 2012-04-11T11:51:15.883 回答