• Exemple 45

    Nous pouvons placer une image en noir et blanc avec, dessus, une partie de cette même image en couleur.

    Cette partie en couleur peut être positionnée selon l'image, de la taille voulue et de forme géométrique.

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="nb">&nbsp;</p>
    <p id="coul">&nbsp;</p>
    </div>
    <style><!--
    #nb{position:absolute; width:60vw; height:33.75vw; background:url('http://ekladata.com/Zw1ZFHMgGYCL-y7n_6h90M21mGY@1152x648.jpg'); filter:grayscale(1);}
    #coul{position:absolute; width:30vw; height:15.75vw; border:0.4vh ridge white; background:url('http://ekladata.com/Zw1ZFHMgGYCL-y7n_6h90M21mGY@1152x648.jpg'); background-position:-10vw -5vw; background-size:60vw 33.75vw;  transform:translate(10vw,5vw);}
    --></style>

     

     

    Dans ce deuxième exemple, le fond est en filtre sépia avec opacité 0.5 et la sélection ronde avec ombre 3D.

    On peut placer plusieurs parties colorées sur une même image.

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="nb1">&nbsp;</p>
    <p id="coul1">&nbsp;</p>
    </div>
    <style><!--
    #nb1{position:absolute; width:60vw; height:33.75vw; background:url('http://ekladata.com/VKky4gW_ZvCzIYV86GYlS4hQPCo@1152x648.jpg'); filter:sepia(1); opacity:0.5;}
    #coul1{position:absolute; width:20vw; height:20vw; border-radius:50%; box-shadow:inset -0.6vh -0.6vh 1vh black, inset 0.6vh 0.6vh 1vh white; background:url('http://ekladata.com/VKky4gW_ZvCzIYV86GYlS4hQPCo@1152x648.jpg'); background-position:-24vw -5vw; background-size:60vw 33.75vw; transform:translate(24vw,5vw);}
    --></style>