CSSでの簡単な画像比較-CSSチュートリアル-php.cn

CSSでの簡単な画像比較

Mary-Kate Olsen

リリース： 2024-10-01 06:13:29

オリジナル

377 人が閲覧しました

CSS での画像比較の簡単なトリック

Simple Image Comparison in CSS

入力範囲スライダーと、その下にクラス名 .front、.back を持つ 2 つの 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、 の CSS を作成します>戻る

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

ログイン後にコピー

.front div の後ろに .back 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 のさまざまなバリエーションを試すことができます。

ぼかし

.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 中国語 Web サイトの他の関連記事を参照してください。