Einfacher Bildvergleich in CSS-CSS-Tutorial-php.cn

Einfacher Bildvergleich in CSS

Mary-Kate Olsen

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

Original

378 Leute haben es durchsucht

Einfacher Trick für den Bildvergleich in CSS

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Ausgabe:

Simple Image Comparison in CSS

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

Simple Image Comparison in CSS

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

Nach dem Login kopieren

Simple Image Comparison in CSS

invertieren

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

Nach dem Login kopieren

Simple Image Comparison in CSS

Endgültige Ausgabe: mit Graustufen

Simple Image Comparison in CSS

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!