• Image de fond

    Je reviens sur un sujet déjà traité mais: "Cent fois, sur le métier..."

    Nous pouvons mettre une image en fond de boîte (div ou p); nous pouvons remplir la totalité de la boîte avec cette image mais nous pouvons aussi choisir la position qui s'affichera.

    De plus, la forme de la boîte n'est pas forcément un rectangle ou un carré.

    Pour cela, je vous propose des exemples avec l'image de référence en fond noir et blanc et en opacité réduite, pour bien visualiser l'effet; cependant, vous pourrez n'afficher que la partie sélectionnée, dans votre article.

    Ensuite, libre à vous d'ajouter une animation, automatique ou non.

     

     

    <div style="width: 40vw; height: 46vh; margin: 2vh auto;">
    <p id="bk1">&nbsp;</p>
    <p id="bk2">&nbsp;</p>
    </div>
    <style><!--
    #bk1{position:absolute; width:40vw; height:46vh; background:url('http://ekladata.com/y1YOE-GsTy-HDLimBcrSui7C1yE.jpg'); background-size:40vw 46vh; filter:grayscale(1); -webkitfilter:grayscale(1); opacity:0.5;}
    #bk2{position:absolute; width:10vw; height:46vh; transform:translate(10vw,0vh); background:url('http://ekladata.com/y1YOE-GsTy-HDLimBcrSui7C1yE.jpg'); background-size:40vw 46vh;background-position:-10vw 0vh;}
    --></style>

    La boîte est dimensionnée  et centrée dans la page.

    L'image de fond, écrite en premier pour être dessous,  est affichée en noir et blanc, dimensionnée de même que l'image de fond pour qu'elle remplisse ce paragraphe.

    L'image colorée est dimensionnée et positionnée, remplie avec la même image mais qui ne remplira que les dimensions de ce paragraphe (10vw,46vh), à partir de l'image complète (40vw 46vh); pour choisir la partie affichée, nous utilisons background-position, qui nous permet de choisir une zone particulière: attention, les valeurs de positionnement sont à écrire en négatif.


    La forme de la sélection peut être différente et une décoration peut être ajoutée.

     

     

    <div style="width: 40vw; height: 46vh; margin: 2vh auto;">
    <p id="bk3">&nbsp;</p>
    <p id="bk4">&nbsp;</p>
    </div>
    <style><!--
    #bk3{position:absolute; width:40vw; height:46vh; border-radius:50%; background:url('http://ekladata.com/u2E89N-GY1b_8KAuo7j7w8iArcE.jpg'); background-size:40vw 46vh; filter:grayscale(1); -webkitfilter:grayscale(1);}
    #bk4{position:absolute; width:30vw; height:36vh; border-radius:50%; border:0.3vh double black; transform:translate(5vw,5vh); background:url('http://ekladata.com/u2E89N-GY1b_8KAuo7j7w8iArcE.jpg'); background-size:40vw 46vh;background-position:-5vw -5vh; box-shadow:inset 0.5vh 0.5vh 1.5vh white, inset -0.5vh -0.5vh 1vh black;}
    --></style>

    Largeur et hauteur de la sélection, arrondi, bordure, positionnement et position sélectionnée idem, ombre 3D.


    Nous regarderons ensuite comment ajouter une animation à la sélection et à faire un montage avec différentes images. Arrêt au survol.

     

     

     

    <div style="width: 40vw; height: 46vh; margin: 2vh auto;">
    <p id="bk5">&nbsp;</p>
    <p id="bk7">&nbsp;</p>
    <p id="bk6">&nbsp;</p>
    </div>
    <style><!--
    #bk5{position:absolute; width:40vw; height:46vh; background:url('http://ekladata.com/y1YOE-GsTy-HDLimBcrSui7C1yE.jpg'); background-size:40vw 46vh; filter:grayscale(1); -webkitfilter:grayscale(1); opacity:0.5;}
    #bk6{position:absolute; width:10vw; height:46vh; animation:select 5s linear infinite alternate; animation-play-state:running; background:url('http://ekladata.com/y1YOE-GsTy-HDLimBcrSui7C1yE.jpg'); background-size:40vw 46vh;}
    #bk7{position:absolute; z-index:2;width:40vw; height:46vh;}
    @keyframes select{
    0%  { transform:translate(0vw,0vh); background-position:0vw 0vh;}
    100%  { transform:translate(30vw,0vh); background-position:-30vw 0vh;}
    }
    #bk7:hover ~ #bk6{animation-play-state:paused;}
    --></style>

    L'arrêt au survol nous oblige à ajouter un bouton invisible (bk7) en premier plan (z-index:2;)

     


    Vous remarquerez que l'agrandissement au survol se fait à partir de la partie affichée.

     

     

     

     

     

    <div style="width: 40vw; height: 46vh; margin: 2vh auto; border: 0.3vh ridge white;">
    <p id="bck1">&nbsp;</p>
    <p id="bck2">&nbsp;</p>
    <p id="bck3">&nbsp;</p>
    <p id="bck4">&nbsp;</p>
    <p id="bck5">&nbsp;</p>
    </div>
    <style><!--
    #bck1{position:absolute; width:40vw; height:46vh; background:url('http://ekladata.com/nkxZP-9SAeBzOu8DCtXS0WRmf1U.jpg'); background-size:40vw 46vh;}
    #bck2{position:absolute; width:6vw; height:8vh; border:0.3vh solid white; background:url('http://ekladata.com/lvIRn7usx1ehjpT-MWTk_ESJ5l4.jpg'); background-size:40vw 46vh; background-position:-2vw -5vh; transform:translate(2vw,5vh);transition:all 1s linear;}
    #bck3{position:absolute; width:6vw; height:8vh; border:0.3vh solid white; background:url('http://ekladata.com/rBYqeuVEcQ16C7qd63moI6FKDms.jpg'); background-size:40vw 46vh; background-position:-2vw -30vh; transform:translate(2vw,30vh);transition:all 1s linear;}
    #bck4{position:absolute; width:6vw; height:8vh; border:0.3vh solid white; background:url('http://ekladata.com/Qar5bZ1tzoaL7NTo-xYI_gNylpk.jpg'); background-size:40vw 46vh; background-position:-32vw -5vh; transform:translate(32vw,5vh);transition:all 1s linear;}
    #bck5{position:absolute; width:6vw; height:8vh; border:0.3vh solid white; background:url('http://ekladata.com/FFAbYOfnoqwgnWw52eQwu-FYGqk.jpg'); background-size:40vw 46vh; background-position:-32vw -30vh; transform:translate(32vw,30vh);transition:all 1s linear;}
    #bck2:hover,#bck3:hover,#bck4:hover,#bck5:hover{z-index:5; width:40vw; height:46vh; border:none; transform:translate(0vw,0vh); background-position:0vw 0vh;}
    --></style>

    Un point important: le programme doit trouver d'abord l'adresse de l'image de fond (background:url(''); et sa taille (background-size:) avant de savoir quelle partie il doit sélectionner (background-position)

    Si on ne précise pas le background- position, il sera par défaut, l'angle haut/gauche: background-position:0vw 0vh;