CSSでフィルタープロパティを使用する方法

CSSフィルタープロパティにより、ぼかし、明るさ、グレースケールなどの視覚効果をHTML要素に直接適用できます。 1）構文フィルター：フィルター機能（値）を使用して、効果を適用します。 2）複数のフィルターをスペース分離と組み合わせます。 3）一般的な関数には、Blur（）、Brightness（）、Contrast（）、Grayscale（）、Hue-Rotate（）、Invert（）、Opacity（）、Surtate（）、およびSepia（）が含まれます。 4）ホバーエフェクト、ダークモードの調整、ぼやけた背景、および障害状態にフィルターを適用します。 5）大きな要素での過度の使用を避けてパフォーマンスを確保し、背景のぼやけのためのバックドロップフィルターを好みます。 6）フィルターは非破壊的であり、最新のブラウザーで広くサポートされているため、元のコンテンツを変更せずに動的でパフォーマンスのある視覚的強化に最適です。

CSS filterプロパティは、視覚効果を要素に適用するための強力なツールです。ほとんどの場合、一般的に画像だけでなく、ビデオ、ボタン、またはその他のHTML要素でもあります。画像編集ソフトウェアやJavaScriptを必要とせずに、ぼかし、輝度調整、グレースケールなど、すべてCSSを介して直接的に直接コンテンツのレンダリングを変更できます。

効果的に使用する方法は次のとおりです。

基本的な構文

filterプロパティは、1つ以上のフィルター機能をその値として使用します。一般的な構文は次のとおりです。

要素 {
  フィルター：フィルター機能（値）;
}

複数のフィルターをスペースで分離することで適用できます。

 img {
  フィルター：ぼかし（2px）明るさ（70％）コントラスト（120％）;
}

一般的なフィルター関数

各フィルター関数は、特定の視覚的側面を調整します。これが最も広く使用されているものです：

• blur(px)
  ガウスのぼかしを適用します。ピクセル値が高いほど、要素がぼやけます。
  例： filter: blur(3px); - 背景のぼやけの効果に適しています。

• brightness(%)
  明るさを調整します。 100%変化がないことを意味します。 100%を超えると、それが明るくなり、下は暗くなります。
  例： filter: brightness(50%); - ホバー調光に役立ちます。

• contrast(%)
  コントラストを調整します。 100%は変更されていません。値が低いとコントラストが減り、高くなります。
  例： filter: contrast(150%);

• grayscale(%)
  要素をグレースケールに変換します。 100%は完全に灰色で、 0%はフルカラーです。
  例： filter: grayscale(100%); - 非アクティブな状態の画像でよく使用されます。

• hue-rotate(deg)
  カラーホイールを回転させます。学位値（0DEGから360DEG）を受け入れます。
  例： filter: hue-rotate(90deg); - スペクトル全体に色をシフトします。

• invert(%)
  色を反転させます。 100%完全に反転したことを意味します。
  例： filter: invert(100%); - ダークモードで使用されています。

• opacity(%)
  透明性を設定します。 opacity CSSプロパティに似ていますが、フィルターチェーン内で動作します。
  例： filter: opacity(50%);

• saturate(%)
  色の飽和を調整します。 100%は正常で、値が高いのは色を強化します。
  例： filter: saturate(200%);

• sepia(%)
  セピアトーンを適用します。 100%ビンテージの写真効果を与えます。
  例： filter: sepia(80%);

実際のユースケース

• 画像ホバーエフェクト
  ホバーで画像をより魅力的にします：

   IMG：ホバー{
    フィルター：明るさ（120％）飽和（150％）;
    遷移：0.3sの容易さをフィルター。
  }

• ダークモードの調整
  組み込みコンテンツのコントラストを反転または調整します。

   .dark-mode iframe {
    フィルター：反転（1）色相（180DEG）;
  }

• ぼやけた背景（背景効果）
  backdrop-filterは透明なオーバーレイに適していますが、 filter: blur()要素自体で動作します。

   .blurred-box {
    フィルター：Blur（4px）;
  }

• 障害国
  視覚的に要素を強調しない：

   .Disabled-Button {
    フィルター：グレースケール（100％）不透明（60％）;
  }

  ---

  パフォーマンスとブラウザのサポート

  • 通常、フィルターはハードウェアアクセラレーションされているため、パフォーマンスが良好です。
  • will-changeまたはtransform: translateZ(0)を使用して、大きな要素に遅れに気付いた場合は慎重に。
  • ほとんどの最新のブラウザはfilterをサポートしていますが、インターネットエクスプローラーの古いバージョンはそうではありません。
  • 背景効果（要素の背後にあるものをぼかす）については、代わりにbackdrop-filterを使用します。

  ---

  最終メモ

  filterプロパティは非破壊的であり、オリジナルの画像またはコンテンツは変更されません。微妙な機能強化や動的なUIフィードバックに最適です。大きな要素の大きなぼやけのような重いフィルターを使いすぎることは避けてください。彼らはローエンドのデバイスのパフォーマンスに影響を与える可能性があるためです。

  基本的に、ビジュアルをすばやくきれいに微調整したい場合は、 filterはCSS機能です。

  以上がCSSでフィルタープロパティを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。