Perbandingan Imej Mudah dalam CSS-tutorial css-php.cn

Perbandingan Imej Mudah dalam CSS

Mary-Kate Olsen

Lepaskan： 2024-10-01 06:13:29

asal

379 orang telah melayarinya

Helah mudah untuk Perbandingan Imej dalam CSS

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Output:

Simple Image Comparison in CSS

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

Simple Image Comparison in CSS

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

Salin selepas log masuk

Simple Image Comparison in CSS

terbalikkan

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

Salin selepas log masuk

Simple Image Comparison in CSS

Output Akhir: dengan skala kelabu

Simple Image Comparison in CSS

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!