CSS フィルタリング プロパティ ガイド: フィルタとグレースケール

CSS フィルター属性ガイド: フィルターとグレースケール

はじめに:
CSS のフィルター属性 (フィルター) は、Web ページにさまざまな特殊効果やエフェクトを追加できます。 、ページがより充実し、より魅力的になるようにします。その中でも、グレースケールは画像を白黒のトーンに変換できる一般的に使用されるフィルター効果です。この記事では、特にグレースケール効果の実装のためのフィルター属性の使用法とコード例を紹介します。

1. filter 属性の概要:
filter 属性は CSS3 の新しい属性で、要素をレンダリングするときに画像処理や特殊効果を実行できるようになります。フィルター属性を使用すると、ぼかし、グレースケール、明るさ、コントラストなどの効果を加えて画像を処理できます。フィルター属性は、画像、テキスト、背景などを含むすべての要素に適用できます。

2. フィルター属性の構文と共通属性:
フィルター属性の基本構文は次のとおりです:

element {
    filter: none | <filter-function> [<filter-parameter>]* | initial | inherit;
}

一般的に使用されるフィルター属性関数は次のとおりです:

1. blur : ぼやけた画像、値はピクセルまたはパーセンテージです。
2. 明るさ: 画像の明るさを調整します。値はパーセントです。
3. contrast: 画像のコントラストを調整します。値はパーセントです。
4. グレースケール: 画像をグレースケールに変換します。値はパーセントです。
5. invert: 画像を反転します。値はパーセントです。
6. セピア: 画像をセピアに変換します。値はパーセントです。
7. saturate: 彩度の変化、値はパーセントです。
8. 不透明度: 要素の透明度を設定します。値はパーセントです。

3. コード例:
以下は、一般的に使用されるフィルター効果のコード例です:

1. ##グレースケール効果 (グレースケール):

   img {
    filter: grayscale(100%);
   }

2. ぼかし効果(ぼかし):

   element {
    filter: blur(5px);
   }

3. 明るさ調整効果(明るさ):

   element {
    filter: brightness(80%);
   }

4. コントラスト調整エフェクト (コントラスト):

   element {
    filter: contrast(120%);
   }

5. 反転エフェクト (反転):

   element {
    filter: invert(100%);
   }

6. セピア エフェクト (セピア):

   element {
    filter: sepia(100%);
   }

7. 彩度変更効果(saturate):

   element {
    filter: saturate(150%);
   }

8. 要素の透明度調整効果(opacity):

   element {
    filter: opacity(50%);
   }

上記は一般的に使用されるフィルター効果の例をいくつか示しますが、実際の使用では、必要に応じてパラメーター値を調整できます。さまざまなフィルター効果を組み合わせて、さらに特殊な効果を作成できます。

結論:

CSS のフィルター属性を使用して、Web ページにさまざまな画像処理や特殊効果を追加できます。その中で、グレースケールは一般的に使用されるグレースケール効果の 1 つです。この記事では、フィルター属性の基本構文と共通プロパティを簡単に紹介し、一般的な効果のコード例をいくつか示します。フィルター属性を柔軟に使用することで、ページに視覚的な魅力を追加し、ユーザー エクスペリエンスを向上させることができます。

以上がCSS フィルタリング プロパティ ガイド: フィルタとグレースケールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。