Html 使用 DIV 作为另一个元素的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25970787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use a DIV as a background for another element
提问by Seeven
If I have a divthat contains images and text, is it possible to use this div's content as a background for, let's say, a section?
如果我有一个div包含图像和文本的 ，是否可以将此div的内容用作背景，例如， a section？
For example, something like that :
例如，这样的事情：
HTML:
HTML：
<section id="sec1">
<div id="bg-div">
<em>This is a background</em>
<img src="image1">
<img src="image2">
</div>
</section>
And CSS:
和 CSS：
#sec1 {
background: src(#bg-div);
}
This way, I could have this divcontent acting like a background for my section.
这样，我可以让这些div内容充当我的section.
回答by Mevrael
Here I made an example with 2 divs:
在这里，我用 2 个 div 做了一个例子：
- .content which contains everything you need in frontend
- .background - with text, images and everything else in background
- .content 包含您在前端所需的一切
- .background - 在背景中包含文本、图像和其他所有内容
To overwrap one div on another (make an overlay) you have to put them into same element, in this example it's #wrapper div. Put position: relative and width/height for wrapper; position: relative also should be set for your content div and position: absolute; top: 0; left: 0; for your background.
要将一个 div 覆盖在另一个 div 上（制作叠加层），您必须将它们放入同一个元素中，在本例中为 #wrapper div。放置位置：包装纸的相对和宽度/高度；position: relative 也应该为你的内容 div 和 position: absolute 设置；顶部：0；左：0；为你的背景。
The final step is to setup z-index. Element containing a bigger value in z-index is rendered above elements with smaller z-index value. In other words you should set z-index for background div smaller then for content div.
最后一步是设置 z-index。在 z-index 中包含较大值的元素呈现在具有较小 z-index 值的元素之上。换句话说，您应该将背景 div 的 z-index 设置为小于内容 div。
Final HTML:
最终 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>
Final CSS:
最终的 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;
}
View live example:
查看实时示例：
回答by Seeven
Use the CSS element()function. See https://developer.mozilla.org/en-US/docs/Web/CSS/element. Currently available only in FF under the -moz-elementprefix. Example:
使用 CSSelement()功能。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/element。目前仅在-moz-element前缀下的 FF 中可用。例子：
<div style="width:400px; height:100px; background:-moz-element(#backgroundElt);">
An alternative would be to play with SVG's foreignObjecttag, cloning the HTML for the element you want to use as background into it.
另一种方法是使用 SVG 的foreignObject标签，将要用作背景的元素的 HTML 克隆到其中。
Spec is at http://dev.w3.org/csswg/css-images/#element-notation.
