CSS에서 이미지 비교를 위한 간단한 방법

입력 범위 슬라이더와 그 아래에 클래스 이름이 '.img-before-after인 상위 div 내부에 클래스 이름이 .front, .back인 두 개의 div를 만들 수 있습니다. '. 인라인 스타일 width:50%를 .front div
에 할당

img-before-after, 입력 범위, input-slider-thumb, 앞, 뒤쪽에

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

.front 및 .back div에 배경 이미지를 추가합니다.

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

z-index를 사용하여 .front div 뒤에 .back div를 보내고 회색조로 만듭니다.

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

입력 슬라이더를 드래그할 때 '.front' div의 너비를 동적으로 늘리거나 줄여야 합니다. '.front' div
의 너비에 입력 범위 값을 추가해야 합니다.

oninput="this.nextElementSibling.style.width = `${this.value}%`"

산출:

아래에서 슬라이더 범위를 드래그할 때 개발 도구에서 너비가 어떻게 증가하고 감소하는지 확인할 수 있습니다.

아래와 같이 흐림, 반전 등과 같은 CSS의 다양한 변형을 시도해 볼 수 있습니다.

흐림

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

거꾸로 하다

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

최종 출력: 회색조 포함

시청해주셔서 감사합니다...