Einfacher Bildvergleich in CSS

Einfacher Trick für den Bildvergleich in CSS

Erstellen wir einen Eingabebereichsschieberegler und zwei Divs darunter mit den Klassennamen .front, .back innerhalb des übergeordneten Div mit dem Klassennamen „.img-before-after“. '. Weisen Sie .front div den Inline-Stil width:50%
zu

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

CSS erstellen für img-before-after, input-range, input-slider-thumb, front, zurück

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

Hintergrundbild für die Divs .front und .back hinzufügen.

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

Lassen Sie uns .back div hinter .front div mit z-index senden und es in Graustufen umwandeln.

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

Wir müssen die Breite von '.front' div dynamisch vergrößern/verkleinern, wenn wir den Eingabeschieberegler ziehen. Wir müssen den Eingabebereichswert an die Breite von '.front' div.
anhängen

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>

Ausgabe:

Unten können Sie beobachten, wie sich die Breite in Entwicklungstools vergrößert und verkleinert, wenn wir den Schiebereglerbereich ziehen.

Sie können es mit verschiedenen CSS-Varianten wie Unschärfe, Invertieren usw. wie unten beschrieben versuchen.

Unschärfe

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

invertieren

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

Endgültige Ausgabe: mit Graustufen

Danke fürs Zuschauen...

Das obige ist der detaillierte Inhalt vonEinfacher Bildvergleich in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!