Użyj DIV jako tła dla innego elementu

Question

Jeśli mam div, który zawiera obrazy i tekst, czy można użyć tej zawartości jako tła dla, powiedzmy, section?

Na przykład coś takiego:

HTML:

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

i CSS:

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

w ten sposób, że może mieć to div zawartość działając jak tło dla mojego section.

Answer 1

Tutaj zrobiłem przykład z 2 div:

• .content który zawiera wszystko, czego potrzeba w frontend
• .background - z tekstem, obrazami i wszystkiego innego w tle

Aby owijaj jeden div na innym (utwórz nakładkę), musisz umieścić je w tym samym elemencie, w tym przykładzie jest to #wrapper div. Umieść pozycję: względną i szerokość/wysokość dla opakowania; pozycja: względna również powinna być ustawiona dla twojego div treści i pozycji: absolutna; top: 0; lewo: 0; dla twojego tła.

Ostatnim krokiem jest ustawienie z-index. Element zawierający większą wartość w indeksie Z jest renderowany powyżej elementów o mniejszej wartości indeksu Z. Innymi słowy, powinieneś ustawić z-index dla div tła mniejszego niż dla div zawartości.

Finał 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> 

Finał 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; 
} 

Zobacz na żywo przykład:

http://jsfiddle.net/1fevoyze/

Answer 2

Użyj funkcji CSS element(). Zobacz https://developer.mozilla.org/en-US/docs/Web/CSS/element. Obecnie dostępny tylko w FF pod prefiksem -moz-element. Przykład:

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

Alternatywą byłoby grać z foreignObject tagu SVG, w klonowanie HTML dla elementu, który chcesz użyć jako tła do niego.

Spec jest na http://dev.w3.org/csswg/css-images/#element-notation.