CSS의 간단한 이미지 비교

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

입력 범위 슬라이더를 만들고 그 아래에 클래스 이름이 .front, .back인 상위 div 내부에 클래스 이름이 '.img-before-after인 두 개의 div를 만듭니다. '. 인라인 스타일 width:50%을 .front 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>

img-before-after, input-range, input-slider-thumb, front, 뒤로

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

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

출력:

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

아래와 같이

blur, invert 등 CSS를 다양하게 변형해 볼 수 있습니다.

흐릿하게

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

반전

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

최종 출력: 회색조 사용

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

위 내용은 CSS의 간단한 이미지 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!