Comparaison d'images simple en CSS

Astuce simple pour la comparaison d'images en CSS

Créons un curseur de plage d'entrée et deux divs en dessous avec les noms de classe .front, .back à l'intérieur du div parent avec le nom de classe '.img-before-after '. Attribuez le style en ligne width:50% à .front div

<div class="img-before-after">
    <input type="range" class="range" value="50">
    <div class="front" style="width: 50%;"></div>
    <div class="back"></div>
</div>

Créez du CSS pour img-before-after, input-range, input-slider-thumb, front, retour

body {
    background: #d6d6d6;
}

.img-before-after {
    position: relative;
    width: 900px;
    height: 600px;
}

input[type="range"] {
    background: transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    outline: none;
    position: absolute;
    z-index: 2;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    height: 600px;
    cursor: pointer;
    -webkit-appearance: none;
    background: black;
}

Ajoutez une image d'arrière-plan pour les divs .front et .back.

.front, .back {
    position: absolute;
    width: 100%;
    height: 600px;
    background: url("https://shorturl.at/kbKhz") no-repeat;
    background-size: cover;
    z-index: 1;
}

Envoyons .back div derrière .front div avec z-index et faisons-le en niveaux de gris.

.back {
    filter: grayscale(1);
    z-index: 0;
}

Nous devons augmenter/diminuer la largeur du div '.front' de manière dynamique lorsque nous faisons glisser le curseur d'entrée. Nous devons ajouter la valeur de la plage d'entrée à la largeur du div '.front'.

oninput="this.nextElementSibling.style.width = `${this.value}%`"

<div class="img-before-after">
   <input type="range" class="range" value="50"
       oninput="this.nextElementSibling.style.width = `${this.value}%`">
   <div class="front" style="width: 50%;"></div>
   <div class="back"></div>
</div>

Sortie :

Ci-dessous, vous pouvez voir comment la largeur augmente et diminue dans les outils de développement lorsque nous faisons glisser la plage du curseur.

Vous pouvez essayer avec différentes variantes en CSS comme flou, inverser etc comme ci-dessous.

flou

.back {
    filter: blur(5px);
    z-index: 0;
}

inverser

.back {
    filter: invert(1);
    z-index: 0;
}

Sortie finale : avec niveaux de gris

Merci d'avoir regardé...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!