-
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;"> </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"> </p>
<p id="fd2"> </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.