CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)-CSSチュートリアル-php.cn

CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)

藏色散人

リリース： 2021-10-18 17:14:42

オリジナル

5799 人が閲覧しました

前回の記事「HTMLとCSSを使ってガラス・ぼかし効果を作るには？」 >>この記事では、HTML と CSS を使用してガラス/ぼかし効果を作成する方法を紹介します。興味のある友達は読んで学ぶことができます~

この記事では、CSS を使用してガラス/ぼかし効果をすばやく作成する方法を紹介します。 PNG 画像を変更する、カラー、これも日常の開発で一般的なエフェクトの実装方法です。

まずは、この記事で紹介しているPNG画像素材をダウンロードできます。ダウンロードアドレス: //m.sbmmt.com/xiazai/sucai/1733

CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)

(元の画像はここからダウンロードできます)

次に、2 つの実装方法を紹介します。

最初の方法

この例では、グレースケールフィルターを使用して、カラーイメージをグレースケールイメージに変更します。

コードは次のとおりです:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            filter: grayscale(10);
        }
    </style>
</head>

<body>
<h2>灰度图像</h2>
<img src=
             "001.png"
     width="500px" height="250px" alt="filter applied" />
</body>

</html>

ログイン後にコピー

効果は次のとおりです:

CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)

##2 番目のメソッド

この例では、画像に多くのフィルターを使用しています~

コードは次のとおりです:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            width:40%;
            float:left;
        }
        .image1 {
            filter: invert(100%);
        }
        .image2 {
            filter: sepia(100%);
        }
    </style>
</head>

<body>
<img class = "image1" src=
        "001.png"
     width="500px" height="250px" alt="filter applied" />

<img class = "image2" src=
        "001.png"
     width="500px" height="250px" alt="filter applied" />
</body>

</html>

ログイン後にコピー

効果は次のとおりです:

CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)

ここで誰もが理解しておく必要がある重要な属性フィルター:

フィルター属性は、要素 (通常は CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)

) の視覚効果 (例: ぼかしや彩度) を定義します。

Filter 属性は主に画像の視覚効果を設定するために使用されます。Filter 関数には多くの属性値があります。構文は次のとおりです:

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
        |hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜

ログイン後にコピー

Filters は通常使用しますパーセンテージ (例: 75%)、もちろん、小数として表現することもできます (例: 0.75)。

注: Internet Explorer の古いバージョン (4.0 ～ 8.0) でサポートされている非標準の「フィルター」属性は非推奨になりました。 IE8 以前のブラウザでは通常、opacity 属性が使用されます。

PHP 中国語 Web サイトプラットフォームには、多くのビデオ教育リソースがあります。皆さんも「

css ビデオチュートリアル」を学習してください。

以上がCSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。