这里我用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：

最终的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;

}

查看实时示例：