• 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('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">&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('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">&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('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">&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('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%.