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

概述如果我有一个包含图像和文本的div,是否可以使用这个div的内容作为背景,比方说,一节？ 例如,类似的东西： HTML： <section id="sec1"> <div id="bg-div"> <em>This is a background</em> <img src="image1"> <img src="image2"> < 如果我有一个包含图像和文本的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 >            <p>This text is in frontend</p>    </div>    <div >        <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/@R_779_4043@_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/

总结

以上是内存溢出为你收集整理的html – 使用DIV作为另一个元素的背景全部内容，希望文章能够帮你解决html – 使用DIV作为另一个元素的背景所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。