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

Question

如果我有一个包含图像和文本的div，是否可以将此div 的内容用作section 的背景？

例如，类似的东西：

HTML：

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

还有 CSS：

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

这样，我可以让这个div 内容充当我section 的背景。

Answer 1

这里我用 2 个 div 做了一个例子：

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

要将一个 div 覆盖在另一个 div 上（制作覆盖），您必须将它们放入同一个元素中，在本例中为 #wrapper div。放置位置：包装器的相对和宽度/高度； position: relative 也应该为您的内容 div 和 position: absolute 设置；顶部：0；左：0；为你的背景。

最后一步是设置 z-index。 z-index 中包含较大值的元素呈现在 z-index 值较小的元素上方。换句话说，您应该将背景 div 的 z-index 设置为比内容 div 小。

最终的 HTML：

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

最终 CSS：

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

查看实时示例：

http://jsfiddle.net/1fevoyze/

Answer 2

使用 CSS element() 函数。见https://developer.mozilla.org/en-US/docs/Web/CSS/element。目前仅在 -moz-element 前缀下的 FF 中可用。示例：

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

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

规格在http://dev.w3.org/csswg/css-images/#element-notation。