私は最近、インターネット上で特に素晴らしい属性を発見しました。それは 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 src="img/草莓.jpg" style="max-width:90%" height="192px"/ alt="CSS3 での filter 属性の使用方法の詳細な図による説明 (コード例)" >
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 サイトの他の関連記事を参照してください。