如果我有一个包含图像和文本的div,是否可以使用这个div的内容作为背景,比方说,一节？
例如,类似的东西：
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内容像我的部分的背景一样.
解决方法
这里我用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;
}
查看实时示例：
