CSS 中的简单图像比较-css教程-PHP中文网

CSS 中的简单图像比较

Mary-Kate Olsen

发布： 2024-10-01 06:13:29

原创

378 人浏览过

CSS 中图像比较的简单技巧

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

登录后复制

输出：

Simple Image Comparison in CSS

下面您可以看到当我们拖动滑块范围时，开发工具中的宽度如何增加和减少。

Simple Image Comparison in CSS

您可以尝试使用 CSS 的不同变体，例如

blur、invert 等，如下所示。

模糊

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

登录后复制

Simple Image Comparison in CSS

反转

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

登录后复制

Simple Image Comparison in CSS

最终输出：灰度

Simple Image Comparison in CSS

感谢您的观看...

以上是CSS 中的简单图像比较的详细内容。更多信息请关注PHP中文网其他相关文章！