Comparaison d'images simple en CSS-tutoriel CSS-php.cn

Comparaison d'images simple en CSS

Mary-Kate Olsen

Libérer： 2024-10-01 06:13:29

original

378 Les gens l'ont consulté

Astuce simple pour la comparaison d'images en CSS

Simple Image Comparison in 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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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

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

Copier après la connexion

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}%`"

Copier après la connexion

<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>

Copier après la connexion

Sortie :

Simple Image Comparison in CSS

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.

Simple Image Comparison in CSS

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

flou

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

Copier après la connexion

Simple Image Comparison in CSS

inverser

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

Copier après la connexion

Simple Image Comparison in CSS

Sortie finale : avec niveaux de gris

Simple Image Comparison in CSS

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!