CSS3 フィルター属性の使い方の紹介

1. はじめに

フロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少なかれ使用されます。属性値が多すぎるため、この記事ではその関連情報を整理して記録します。

II. はじめに

フィルター属性は、要素 (通常は ) の視覚効果を定義します。

プロパティ値は次のとおりです。

プロパティ値	説明する
なし	デフォルト値、効果なし。
ぼかし(px)	画像にガウスぼかしを設定します。デフォルト値は 0 です。
輝度（％）	画像に線形乗算を適用し、画像を明るくしたり暗くしたりします。デフォルト値は 1 です。
対比（％）	画像のコントラストを調整します。デフォルト値は 1 です。
グレースケール(%)	画像をグレースケールに変換します。デフォルト値は 0 です。
色相回転(度)	画像に色相回転を適用します。デフォルト値は 0 度です。
反転(%)	入力画像を反転します。デフォルト値は 0 です。
不透明度(%)	変換された画像の透明度レベル。デフォルト値は 1 です。
飽和度(%)	画像の彩度を変換します。デフォルト値は 1 です。
セピア（％）	画像をセピア色に変換します。デフォルト値は 0 です。

注: フィルターは通常、パーセンテージ (75% など) で表されますが、小数 (0.75 など) で表すこともできます。

3. デモコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
    <スタイル>
        。容器 {
            マージン: 4rem 自動;
            幅: 100%;
            高さ: 自動;
            テキスト配置: 中央;
        }

        。箱 {
            表示: インラインブロック;
            マージン: 1rem;
        }

        .box ul {
            マージン: 0;
            パディング: 0;
            リストスタイル: なし;
            テキスト配置: 左;
        }

        .box ul li {
            マージン: .25rem 0;
            パディング: .25rem;
            カーソル: ポインタ;
        }

        .box ul li:hover {
            背景色: #eee;
        }

        ul li.active {
            背景色: #eee;
        }

       .box 画像 {
            幅: 260ピクセル;
            高さ: 260px;
        }

    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <h3>左側をクリックするとプロパティが表示されます</h3>
        <div class="box">
            <ul>
                <li data-p="blur(5px)">フィルター: ぼかし(5px)</li>
                <li data-p="brightness(.5)">フィルター: brightness(.5)</li>
                <li data-p="contrast(.5)">フィルター: コントラスト(.5)</li>
                フィルター: グレースケール(1)
                <li data-p="hue-rotate(90deg)">フィルター: hue-rotate(90deg)</li>
                <li data-p="invert(.4)">フィルター: invert(.4)</li>
                <li data-p="opacity(.4)">フィルター: opacity(.4)</li>
                フィルター: 飽和(.5)
                <li data-p="セピア(.5)">フィルター: セピア(.5)</li>
            </ul>
        </div>
        <div class="box">
            <div class="origin">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div>元の画像</div>
        </div>
        <div class="box">
            <div id="フィルター">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div id="info">効果図</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <スクリプト>
        $(関数() {
                $lis = $("li") とします。
               $lis.on("クリック", 関数() {
                    $lis.removeClass("アクティブ");
                    p = $(this).addClass("active").data("p"); とします。
                    $("#filter").css({"filter": p});
                    $("#info").text("フィルター: " + p);
               });
        });
    </スクリプト>
</本文>
</html>

以上がCSS3フィルター属性の使い方の詳しい紹介です。CSS3フィルター属性の詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

<<: MySQL インポートおよびエクスポートのバックアップの詳細

>>: ブラウザの互換モードでボタン内のテキストが垂直方向に中央揃えにならない問題について簡単に説明します。