使用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/