Question

有没有办法只使用一个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>

修改

感谢您的快速解答！ Here's the solution

Answer 1

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

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

但不是每个浏览器都可以处理它！从版本3.6（Gecko 1.9.2）开始，Firefox支持多种背景，从版本1.3开始支持Safari，从版本10开始支持Chrome，从版本10.50开始支持Opera（Presto 2.5），从版本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;
}

我认为你定义背景图像的顺序是堆栈的顺序

Answer 2

你可以使用 CSS3 乘法背景写这样：

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

但它在IE8＆amp;下方。

选中此http://www.sitepoint.com/mastering-css3-multiple-backgrounds/#fbid=Mg9Q6GSmvXB

Answer 3

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

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

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

Answer 4

谢谢大家快速解答！它的工作原理如下：

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

请注意，您必须先写入较小或透明的背景图像（最终背景保留在行尾）。感谢您帮助我们找到解决方案！

Answer 5

这可能显示方式

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;
}

Answer 6

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

<img src="img1.png" style="background-image: url(img2.png)"/>

Answer 7

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;
}

有关详细信息，请参阅此处： * Multiple Backgrounds with CSS3 *

在同一div标签中叠加背景图像

修改

7 个答案: