CSS3 での filter 属性の使用方法の詳細な図による説明 (コード例)

私は最近、インターネット上で特に素晴らしい属性を発見しました。それは CSS3 のフィルター属性です。この属性は、1 つの画像に複数の効果を与えることができます。 CSS3 でフィルター フィルターを使用する方法と、フィルター フィルターの効果を示す例について説明します。興味がある場合は、以下を読み続けてください。

多くの人は、CSS フィルターの意味を知りません。平たく言えば、フィルターとは、要素 (通常は ) の視覚効果 (ぼかしや彩度など) を設定できる、公式に定義されたフィルター属性を指します。

フィルター属性の構文: フィルター: なし | コントラスト () | 色相反転 () | | saturate() | sepia() | url();

使用方法: 設定する必要のある画像にフィルター属性を直接追加するだけです。

その属性には多くのオプション値があることがわかります。その意味を簡単に紹介します。

1、グレースケール グレースケール

2、セピア ブラウン (さまざまなレトロな古い写真付き)。感情)

3、彩度

4、色相回転

5、反転

6、不透明度透明度

7、明るさ

8、コントラスト

9、ぼかし

10、ドロップシャドウ

デモ例 1:

filter 属性を使用して画像をグレースケール画像に変換します。値は変換率です。値が 100% の場合、完全にグレースケール画像に変換されます。値が 0% の場合、画像に変化はありません。値が 0% ～ 100% の場合は、完全なグレースケール画像と元の画像の間になります。画像。この例では、グレースケールは 50% に設定されています

HTML コード:

<img  src="/static/imghw/default1.png"  data-src="img/草莓.jpg"  class="lazy"      style="max-width:90%" height="192px"/ alt="CSS3 での filter 属性の使用方法の詳細な図による説明 (コード例)" >

CSS コード:

img {
	 -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
	filter: grayscale(50%);
    }

レンダリング:

前者は元の画像、後者は 50% グレースケールを設定した効果です。

例 2:

フィルター属性を使用してイメージをガウスぼかしに設定し、「半径」値でガウス関数の標準偏差を設定します。 screen ブレンドされるピクセルの数。値が大きいほどぼやけます。値が設定されていない場合、デフォルトは 0 です。このパラメーターは CSS の長さの値を設定できますが、パーセント値は受け入れられません。

img {
	 -webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */
    	filter: blur(1.5px);
    }

レンダリング:

この例では、図に示すように、ぼかしを 1.5 ピクセルに設定して、画像にガウスぼかし効果を与えます。

要約: 上記では、CSS3 で画像フィルター属性フィルターを使用する方法を紹介しました。ここでは 2 つのみの属性値を示します。他の属性については、友人が独自に作成することができます。試してみると、予期しない結果が得られるかもしれません。

以上がCSS3 での filter 属性の使用方法の詳細な図による説明 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。