Verwenden Sie ein DIV als Hintergrund für ein anderes Element

Question

Wenn ich eine div, die Bilder und Text enthält, ist es möglich, diese div Inhalt als Hintergrund für, sagen wir mal eine section?

Zum Beispiel so etwas wie die:

HTML:

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

und CSS:

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

Auf diese Weise konnte ich diesen div Inhalt wie ein Handeln Hintergrund für meine section.

Answer 1

Hier machte ich ein Beispiel mit zwei divs:

• .content die
• .background in Frontend enthält alles, was Sie brauchen - mit Text, Bildern und alles andere im Hintergrund

zu Überlappen Sie ein div auf einem anderen (machen Sie eine Überlagerung) Sie müssen sie in dasselbe Element einfügen, in diesem Beispiel ist es #wrapper div. Position eingeben: relativ und Breite/Höhe für die Verpackung; position: relativ sollte auch für dein content div und position gesetzt werden: absolut; oben: 0; links: 0; für deinen Hintergrund.

Der letzte Schritt besteht in der Einrichtung des Z-Index. Ein Element mit einem größeren Wert im Z-Index wird über Elementen mit einem kleineren Z-Indexwert dargestellt. Mit anderen Worten, Sie sollten den Z-Index für Hintergrund-Div kleiner als für Inhalt Div setzen.

Finale 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> 

Finale 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; 
} 

Ansicht anschauliches Beispiel:

http://jsfiddle.net/1fevoyze/

Answer 2

Verwenden Sie die CSS-Funktion element(). Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/element. Momentan nur in FF unter dem Präfix -moz-element verfügbar. Beispiel:

<div style="width:400px; height:100px; background:-moz-element(#backgroundElt);"> 

Eine Alternative wäre mit foreignObject-Tag des SVG zu spielen, das Klonieren der HTML-Code für das Element, das Sie als Hintergrund in sie verwenden möchten.

Spec ist bei http://dev.w3.org/csswg/css-images/#element-notation.