使用DIV作为另一个元素的背景 [英] Use a DIV as a background for another element

问题描述

如果我有一个包含图片和文字的 div ，可以使用此 div 的内容作为背景，让我们说，节？

例如：

HTML ：

 < section id = sec1> 
< div id =bg-div> 
< em>这是背景< / em> 
< img src =image1> 
< img src =image2> 
< / div> 
< / section> 
  

和CSS ：

 ＃sec1 {
 background：src（＃bg-div）; 
} 
  

这样，我可以使用 div

解决方案

p>这里我做了一个有2个div的例子：

• .content包含前端所需的一切


• .background - 背景中有文字，图片和其他内容

要覆盖另一个div必须把它们放在同一个元素中，在这个例子中是#wrapper div。放置位置：包装的相对位置和宽度/高度; position：relative也应该为你的内容div和position设置：absolute; top：0; left：0;为您的背景。

最后一步是设置z-index。在z-index中包含较大值的元素将呈现在具有较小z-index值的元素上方。换句话说，您应该为背景div设置z-index，然后为内容div设置。

最终HTML：

 < div id =wrapper> 
< div class =content> 
< p>此文本位于前端< / p> 
< / div> 
< div class =background> 
< p>背景文字< / p> 
< img src =http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.pngalt =background/> 
< img src =http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.pngalt =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; 
} 
  

查看实例： b
$ b

http://jsfiddle.net/1fevoyze/

If I have a div that contains images and text, is it possible to use this div's content as a background for, let's say, a section ?

For example, something like that :

HTML:

<section id="sec1">
    <div id="bg-div">
        <em>This is a background</em>
        <img src="image1">
        <img src="image2">
    </div>
</section>

And CSS:

#sec1 {
    background: src(#bg-div);
}

This way, I could have this div content acting like a background for my section.

解决方案

Here I made an example with 2 divs:

• .content which contains everything you need in frontend
• .background - with text, images and everything else in 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.

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.

Final 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:

#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:

http://jsfiddle.net/1fevoyze/

这篇关于使用DIV作为另一个元素的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！