Html 使用DIV作为另一个元素的背景

如果我有一个包含图像和文本的

div

，是否可以将这个

div

的内容用作

部分的背景

例如，类似这样的情况：

HTML:

<section id="sec1">
    <div id="bg-div">
        <em>This is a background</em>
        <img src="image1">
        <img src="image2">
    </div>
</section>

#sec1 {
    background: src(#bg-div);
}

这样，我就可以让这个
div
内容像我的
部分的背景一样使用CSS
element（）
函数。看见当前仅在FF中
-moz元素
前缀下可用。例如：

<div style="width:400px; height:100px; background:-moz-element(#backgroundElt);">



另一种方法是使用SVG的
foreignObject
标记，将要用作背景的元素的HTML克隆到其中

规范位于。
这里我用两个div做了一个示例：


.包含前端所需一切的内容
.background-背景中包含文本、图像和其他所有内容

要将一个div覆盖在另一个div上（形成覆盖），您必须将它们放在同一个元素中，在本例中是#wrapper div。放置位置：wrapper的相对和宽度/高度；位置：相对也应该为您的内容div设置，位置：绝对；排名：0；左：0；作为你的背景

最后一步是设置z索引。在z索引中包含较大值的元素呈现在z索引值较小的元素上方。换句话说，您应该将后台div的z索引设置为小于content div的z索引

最终HTML：

查看实时示例：

你的问题很模糊。你想让bg div和section共享相同的背景吗？我想OP想用一个像图像一样的div作为另一个div的背景吗？为什么要这样做：P？简短的回答你不能t@srekoble：我正在尝试使用Skrollr.js来使用视差效果。
div
的内容就像视差背景一样，而
部分是正常的“色带”，这就是为什么我想这么做。这可能会对你有所帮助：尽管CSS
元素（）
函数是我想要的，但它并没有像预期的那样工作，而且它只在Firefox上工作。你能告诉我更多关于
foreignObject
标签的信息吗？我对SVG不太熟悉。只是出于好奇，它是如何表现得不符合预期的？谢谢，我使用了你的方法
position:fixed
用于
.background
元素，它适合我使用Skrollr.js和parallax的需要。它实际上就像一个背景元素。（不过，摆姿势仍然很痛苦）
<div id="wrapper">
    <div class="content">    
        <p>This text is in frontend</p>
    </div>
    <div class="background">
        <p>Background text</p>
        <img src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" alt="background" />
        <img src="http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.png" alt="background 2" />

    </div>
</div>

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}

.content{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
    position: relative;
    z-index: 100;
}

.background{
    color: #999999;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}