CSSバックドロップフィルタープロパティを使用する方法は？

バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター：Blur（10px）およびその他の構文を使用して、つや消しガラス効果を実現します。 2。ぼやけ、明るさ、コントラストなどの複数のフィルター関数をサポートし、重ね合わせることができます。 3.ガラスカードの設計でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描画を避けてください。この属性は、要素の背後にコンテンツがある場合にのみ有効になります。

CSSのbackdrop-filterプロパティは、要素の背後にある領域に視覚効果を適用するための強力なツールですが、要素が他のコンテンツを重複させる場合にのみ、要素自体ではなく、要素の下の背景の上で動作するフィルターのように考えます。これは、最新のUIでフロストガラス（ぼやけ）効果、色のシフト、またはコントラストの調整を作成するために一般的に使用されています。

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

1。基本的な構文と使用法

あるレベルの透明性を持つ要素に直接backdrop-filterを適用したり、他のコンテンツを重複させたりします。

 .FROSTED-GLASS {
  バックドロップフィルター：Blur（10px）;
  背景色：RGBA（255、255、255、0.2）;
  境界線：1pxソリッドRGBA（255、255、255、0.3）;
  パディング：20px;
}

これにより、背後にあるものにぼやけた効果を備えた半透明の容器が作成されます。これは、モーダルウィンドウ、ヘッダー、または画像上のカードに最適です。

2。使用できる一般的なフィルター関数

標準のCSSフィルター関数を適用できます。

• blur(px) - 背景を曖昧にする（Glassmorphismに最適）
• brightness(%) - 輝度を調整します
• contrast(%) - コントラストを変更します
• grayscale(%) - グレースケールを適用します
• hue-rotate(deg) - シフトカラーフエ
• invert(%) - 色の反転
• saturate(%) - 飽和を増加または減少させます
• opacity(%) - 背景の透明性に影響します

例：

 .blurのみ{
  バックドロップフィルター：Blur（5px）;
}

.warm-tone {
  バックドロップフィルター：Hue-Rotate（45Deg）飽和（1.5）;
}

.high-contrast {
  バックドロップフィルター：コントラスト（1.8）明るさ（1.1）;
}

複数のフィルターをスタックすることもできます。

 .Glass-Panel {
  バックドロップフィルター：Blur（8px）明るさ（1.1）飽和（0.8）;
}

3。実践的なユースケース：Glassmorphismカード

backdrop-filterを使用した人気のあるデザイントレンド：

 <div class = "card">
  <h3>透明カード</h3>
  <p>このコンテンツは、ぼやけた背景の上にあります。</p>
</div>

 .card {
  背景：RGBA（255、255、255、0.1）;
  バックドロップフィルター：Blur（10px）;
  パディング：2レム;
  ボーダーラジウス：12px;
  境界線：1pxソリッドRGBA（255、255、255、0.3）;
  最大幅：300px;
  Box-Shadow：0 4px 20px RGBA（0、0、0、0.1）;
}

コンテナが表示可能なもの（背景画像や色付きセクションなど）が重複していることを確認してください。そうしないと、効果が顕著ではありません。

4。ブラウザのサポートとフォールバック

backdrop-filterには優れたモダンなブラウザのサポートがありますが、すべてのブラウザがサポートするわけではありません（特にFirefoxの古いバージョンとモバイルブラウザ）。

• Chrome、Edge、Safari（MacOSおよびIOS）、および新しいFirefoxバージョンでサポートされています。
• iEではサポートされておらず、古いFirefox（旗の後ろ）で制限されています。

優雅なフォールバックに@supportsを使用してください：

 。容器 {
  背景色：RGBA（255、255、255、0.5）; /* 後退する */
}

@supports（backdrop-filter：blur（5px））{
  。容器 {
    バックドロップフィルター：Blur（5px）;
    背景色：RGBA（255、255、255、0.2）;
  }
}

これにより、古いブラウザがぼやけなく半透明の外観を得ることができます。

5。パフォーマンスのヒント

• フルスクリーンまたは非常に動的な要素で大きなぼかし（ blur(20px ) ）を使用しないでください - Jankを引き起こす可能性があります。
• モバイルデバイスで控えめに使用します。重いフィルターはパフォーマンスに影響を与える可能性があります。
• レイヤーをコンパシングするために必要な場合にのみ、 will-changeまたはtransform: translateZ(0)

基本的に、 backdrop-filter特に透明性と境界線と組み合わされている場合、UIの深さと現代性を高めるためのシンプルでありながらスタイリッシュな方法です。覚えておいてください：魔法は、フィルタリングする要素の背後に何かがあるときにのみ現れます。

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