-
Gradient
Nous pouvons, en fond de nos cadres de montage, placer une couleur unie, une image mais aussi un dégradé de couleurs.
Le site que j'utilise pour base est: https://www.colorzilla.com/gradient-editor/
Les dégradés peuvent prendre plusieurs orientations.
Le site indique des couleurs hexadécimales (#ffcc00) mais on peut utiliser des couleurs RGBA (rgba(0,100,255,0.7) qui permettent une transparence (0.7).
couleur unie: background:yellow, ou background:#ffcc00; ou background:rgba(0,100,255,0.7);
Image: background:url('http:/:...jpg);
Gradient:background:linear-gradient(to bottom, rgba(0,100,255,0.7) 0%, rgba(100,100,255,0.3) 100%); ou
background:linear-gradient(to bottom, ffcc00 0%, ccff00 100%); ou un mélange des 2 codes couleur.
***************
On peut aussi placer une image en filigrane mais, je ne sais faire qu'en plaçant cette image semi-transparente en position arrière (z-index:0;) et les éléments du montage par dessus (z-index:1;)
On peut ainsi cumuler un dégradé avec une image semi-transparente.
<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; background: radial-gradient(ellipse at center, rgba(100,255,200,0.7) 0%,#F8E0F1 45%,#F8E0F1 55%,rgba(100,255,200,0.7) 100%);">
<p id="trsp"> </p>
</div>
<style><!--
#trsp{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('http://ekladata.com/kaR6Iv0LxPuhBdOAiRt-3RvSTkU.jpg'); opacity:0.4;}
--></style>
On peut également être moins flou:
Votre montage par dessus.
<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; background: radial-gradient(ellipse at center, rgba(100,255,100,0) 0%,rgba(100,255,100,0) 42%, #ffffff 45%,#ffffff 55%,rgba(100,255,100,0.3) 58%,rgba(100,255,100,0.3) 100%);">
<p id="trsp1"> </p>
<p id="mont1">Votre montage par dessus.</p>
</div><style><!--
#trsp1{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('http://ekladata.com/kaR6Iv0LxPuhBdOAiRt-3RvSTkU.jpg'); opacity:0.4;}
#mont1{position:absolute; z-index:0; width:40vw; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black;}
--></style>
Votre montage par dessus.
<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; background: radial-gradient(circle at 48% 50%, rgba(255,255,255,0.5) 0%,rgba(100,255,100,0) 45%, #ffffff 45%,#ffffff 47%,rgba(100,255,100,0.3) 58%,rgba(100,255,100,0.3) 100%);">
<p id="trsp2"> </p>
<p id="mont2">Votre montage par dessus.</p>
</div>
<style><!--
#trsp2{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('http://ekladata.com/kaR6Iv0LxPuhBdOAiRt-3RvSTkU.jpg'); opacity:0.4;}
#mont2{position:absolute; z-index:0; width:40vw; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black;}
--></style>Le halo du rond est donné par #ffffff 47% et rgba(100,255,100,0.3) 58%: la différence entre 47% et 58% donne ce halo.
Votre montage par dessus.
<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; background: radial-gradient(circle at 48% 50%, rgba(255,255,255,0.5) 0%,rgba(100,255,100,0) 45%, #ffffff 45%,#ffffff 47%,rgba(100,255,100,0.3) 47%,rgba(100,255,100,0.3) 100%);">
<p id="trsp3"> </p>
<p id="mont3">Votre montage par dessus.</p>
</div>
<style><!--
#trsp3{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('http://ekladata.com/kaR6Iv0LxPuhBdOAiRt-3RvSTkU.jpg'); opacity:0.4;}
#mont3{position:absolute; z-index:0; width:40vw; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black;}
--></style>Pas de halo si les couleurs commencent au même pourcentage.
Le positionnement du cercle est possible par 48% 50%.