如果我有一个包含图像和文本的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; }
查看实时示例:
原文地址:https://www.jb51.cc/html/223898.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。