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

This text is in frontend

Background text

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

}

查看實時示例：

總結

以上是生活随笔為你收集整理的div内容用html语言写,html – 使用DIV作为另一个元素的背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。