Perbandingan Imej Mudah dalam CSS

Helah mudah untuk Perbandingan Imej dalam CSS

Mari buat peluncur julat input dan dan dua div di bawahnya dengan nama kelas .depan, .belakang dalam div induk dengan nama kelas '.img-sebelum-selepas '. Tetapkan gaya sebaris lebar:50% kepada .depan 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>

Buat CSS untuk img-sebelum-selepas, julat-input, input-slider-thumb, depan, belakang

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

Tambahkan imej latar belakang untuk kedua-dua div .depan dan .belakang.

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

Mari hantar .belakang div di belakang .depan div dengan z-index dan jadikan skala kelabu.

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

Kita perlu menambah/mengurangkan lebar '.front' div secara dinamik apabila kita menyeret peluncur input. Kita perlu menambah nilai julat input pada lebar '.depan' div.

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>

Output:

Di bawah anda boleh melihat bagaimana lebar semakin bertambah dan berkurangan dalam alat pembangun apabila kami menyeret julat peluncur.

Anda boleh mencuba dengan variasi berbeza dalam CSS seperti kabur, terbalikkan dan lain-lain seperti di bawah.

kabur

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

terbalikkan

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

Output Akhir: dengan skala kelabu

Terima kasih kerana menonton...

Atas ialah kandungan terperinci Perbandingan Imej Mudah dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!