CSS 中的簡單圖片比較

CSS 中影像比較的簡單技巧

讓我們建立輸入範圍滑桿及其下面的兩個div，其類別名稱為.front、.back 在父div 內，類別名為'.img-before-after '。將內嵌樣式 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;
}

讓我們將 .back div 送到 .front div 後面，並使用 z-index
並將其設為灰階。

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

輸出：

下面您可以看到當我們拖曳滑桿範圍時，開發工具中的寬度如何增加和減少。

您可以嘗試使用 CSS 的不同變體，例如 blur、invert

等，如下所示。

模糊

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

反轉

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

最終輸出：

灰階

感謝您的觀看...

以上是CSS 中的簡單圖片比較的詳細內容。更多資訊請關注PHP中文網其他相關文章！