• Images de fond

    Nous savons placer plusieurs images en fond de cadre, et les positionner individuellement: exemple:

     
    <div class="deg" style="width: 40vw; height: 40vw; border: 6px solid red; margin: 2vh auto;">
    <p style="border: 2px solid green; background-color: pink; width: 30vw; height: 25vw; transform: translate(5vw,7vw); font-size: 1vw;">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    .deg {
    background:
    url('http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA.gif') no-repeat left top,
    url('http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA.gif') no-repeat right top,
    url('http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA.gif') no-repeat left bottom,
    url('http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA.gif') no-repeat right bottom,
    url('http://fonds.toutimages.com/fo_beige/beige002.gif');}
    --></style>

    Mais comment dimensionner chaque image ou texture individuellement, par exemple en opacité: en les superposant ?
    Il me semble qu'il faut plutôt superposer différentes images et les placer en positionnement de profondeur, par z-index.

    Nous pouvons ainsi superposer texture, dégradé, image en les modifiant chacun individuellement.

     

     

    <div class="exemple_multi_ar">
    <p id="fd1">&nbsp;</p>
    <p id="fd2">&nbsp;</p>
    <p id="fd3"><img style="width: 7vw;" src="http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@100x100.gif" alt="" /></p>
    </div>

    <style><!--
    .exemple_multi_ar {width: 80vw; height: 45vw; margin:2vh auto; border:0.6vh ridge black;}
    #fd1{position:absolute; z-index:1; width: 80vw; height: 45vw; background: linear-gradient(to bottom, rgba(130, 75, 115, 0.7), rgba(255, 255, 155, 0.2));}
    #fd2{position:absolute; z-index:2; width: 80vw; height: 45vw; background:url(http://ekladata.com/IMHIEo38wqUX8M8feV_bIVjDCv4.jpg); background-size:80vw 45vw; opacity:0.3;}
    #fd3{position:absolute; z-index:3; transform:translate(70vw,35vw);}

    --></style>

    L'opacité et la position dont la profondeur, sont paramétrables individuellement pour obtenir le résultat désiré.

    Vous ajoutez, en z-index:4; par exemple, votre paragraphe texte.