私は最近、インターネット上で特に素晴らしい属性を発見しました。それはCSS3のフィルター属性です。この属性は、1 つの画像に複数の効果を与えることができます。CSS3でフィルター フィルターを使用する方法と、フィルター フィルターの効果を示す例について説明します。興味がある場合は、以下を読み続けてください。
多くの人は、CSS フィルターの意味を知りません。平たく言えば、フィルターとは、要素 (通常は) の視覚効果 (ぼかしや彩度など) を設定できる、公式に定義されたフィルター属性を指します。
フィルター属性の構文: フィルター: なし | コントラスト () | 色相反転 () | | saturate() | sepia() | url();使用方法:設定する必要のある画像にフィルター属性を直接追加するだけです。
その属性には多くのオプション値があることがわかります。その意味を簡単に紹介します。 1、グレースケール グレースケール 2、セピア ブラウン (さまざまなレトロな古い写真付き)。感情) 3、彩度 4、色相回転 5、反転 6、不透明度透明度 7、明るさ 8、コントラスト 9、ぼかし 10、ドロップシャドウデモ例 1:
filter 属性を使用して画像をグレースケール画像に変換します。値は変換率です。値が 100% の場合、完全にグレースケール画像に変換されます。値が 0% の場合、画像に変化はありません。値が 0% ~ 100% の場合は、完全なグレースケール画像と元の画像の間になります。画像。この例では、グレースケールは 50% に設定されていますimg { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%); }
例 2:
フィルター属性を使用してイメージをガウスぼかしに設定し、「半径」値でガウス関数の標準偏差を設定します。 screen ブレンドされるピクセルの数。値が大きいほどぼやけます。値が設定されていない場合、デフォルトは 0 です。このパラメーターは CSS の長さの値を設定できますが、パーセント値は受け入れられません。img { -webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */ filter: blur(1.5px); }
以上がCSS3 での filter 属性の使用方法の詳細な図による説明 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。