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">&nbsp;</p>
</div>
<style><!--
#trsp{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('https://ekladata.com/kaR6Iv0LxPuhBdOAiRt-3RvSTkU.jpg'); opacity:0.4;}
--></style>

On peut également être moins flou:

<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">&nbsp;</p>
<p id="mont1">Votre montage par dessus.</p>
</div>

<style><!--

#trsp1{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('https://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>

<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">&nbsp;</p>
<p id="mont2">Votre montage par dessus.</p>
</div>
<style><!--
#trsp2{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('https://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.

<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">&nbsp;</p>
<p id="mont3">Votre montage par dessus.</p>
</div>
<style><!--
#trsp3{position:absolute; z-index:0; width:60vw; height:33.75vw; background:url('https://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%.