web-dev-qa-db-fra.com

Utiliser un DIV comme arrière-plan pour un autre élément

Si j'ai un div qui contient des images et du texte, est-il possible d'utiliser le contenu de ce div comme arrière-plan pour, disons, un section?

Par exemple, quelque chose comme ça:

HTML:

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

Et CSS:

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

De cette façon, je pourrais avoir ce contenu div agissant comme un arrière-plan pour mon section.

htmlcssbackgroundbackground-image
14
Seeven

Ici, j'ai fait un exemple avec 2 divs:

  • .content qui contient tout ce dont vous avez besoin en frontend
  • .background - avec du texte, des images et tout le reste en arrière-plan

Pour envelopper une div sur une autre (faire une superposition), vous devez les mettre dans le même élément, dans cet exemple, c'est #wrapper div. Position de mise: relative et largeur/hauteur pour l'emballage; position: relative doit également être définie pour votre div de contenu et position: absolue; en haut: 0; gauche: 0; pour votre expérience.

La dernière étape consiste à configurer z-index. L'élément contenant une valeur plus élevée dans l'index z est rendu au-dessus des éléments avec une valeur d'index z plus petite. En d'autres termes, vous devez définir un z-index pour la div d'arrière-plan plus petit que pour la div du contenu.

HTML final:

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

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

Voir l'exemple en direct:

http://jsfiddle.net/1fevoyze/

25
Mevrael

Utilisez la fonction CSS element(). Voir https://developer.mozilla.org/en-US/docs/Web/CSS/element . Actuellement disponible uniquement en FF sous le -moz-element préfixe. Exemple:

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

Une alternative serait de jouer avec la balise foreignObject de SVG, en clonant le code HTML de l'élément que vous souhaitez utiliser comme arrière-plan.

La spécification est à http://dev.w3.org/csswg/css-images/#element-notation .

2
user663031