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中文網其他相關文章！
