html – 使用DIV作为另一个元素的背景
发布时间:2020-12-14 19:42:23 所属栏目:资源 来源:网络整理
导读:如果我有一个包含图像和文本的div,是否可以使用这个div的内容作为背景,比方说,一节? 例如,类似的东西: HTML: section id="sec1" div id="bg-div" emThis is a background/em img src="image1" img src="image2" /div/section 和CSS: #sec1 { background:
如果我有一个包含图像和文本的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,包含前端所需的一切 要将一个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; } 查看实时示例: http://jsfiddle.net/1fevoyze/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |