つや消しのガラス効果を?qū)g現(xiàn)するには、CSSの背景フィルタープロパティを使用することが最も直接的な方法です。 1. RGBAなどの要素に半透明の背景色を設定します。 2.背景フィルターを追加し、ぼやけの値を設定してぼかしを達成します。 3. safariと互換性があるように、webkit-backdrop-filterを追加することをお勧めします。 4.親コンテナが実際のコンテンツまたは背景を持っていることを確認してください。そうしないと、ぼやけ効果が表示されません。注：特にモバイル端子では、パフォーマンスオーバーヘッドが高く、過剰使用を避ける必要があります。 IEの古いバージョンはサポートしていません。Safariをプレフィックスする必要があります。複數(shù)のフィルターを組み合わせて、同時にぼかしと飽和調(diào)整を適用するなど、視覚効果を高めることができます。

要素につや消しガラスに似たぼやけた透明な効果を追加するには、CSS backdrop-filterを使用することが最も直接的な方法です。このプロパティを使用すると、ガウスブラー、カラー調(diào)整など、要素の背後にある領域にグラフィックエフェクトを適用できます。一般的なアプリケーションシナリオは、半透明のフロストガラスの視覚スタイルを作成することです。

バックドロップフィルターとは何ですか？

backdrop-filterは、通常のfilterと同じではありません。通常のfilter要素自體に作用しますが、 backdrop-filter要素の背後にあるコンテンツに作用します。つまり、要素が半透明であるか、透明な領域がある場合にのみ、フィルターの効果を見ることができます。

例： backdrop-filter: blur(10px)を白い不透明Divに追加すると、その背後にあるコンテンツが完全にブロックされているため、変更は表示されません。ただし、このDivを半透明に設定すると（例えば、 background-color: rgba(255,255,255,0.5) ）、その背後にあるコンテンツがぼやけていることがわかります。

基本的なつや消しガラス効果を書く方法は？

つや消しガラス効果を達成するには、通常、次の手順が必要です。

• 背景を容器に設定します
• backdrop-filter屬性を追加し、ぼかし値を設定します
• -webkit-backdrop-filterと互換性があります
• 親は実際のコンテンツまたは背景を持っている必要があります。そうしないと、効果が表示されません。

サンプルコードは次のとおりです。

 。ガラス {
  背景色：RGBA（255、255、255、0.3）;
  バックドロップフィルター：Blur（10px）;
  -webkit-backdrop-filter：blur（10px）; / * safariと互換性があります */
  パディング：20px;
}

HTML構(gòu)造はおおよそこのようなものです。

 <div class = "background-image">
  <div class = "glass">これは、つや消しガラス効果のテキスト</div>です
</div>

.background-imageレイヤーにコンテンツまたは背景畫像があることを確認してください。そうしないと、ぼかし効果が表示されません。

よくある質(zhì)問やメモ

backdrop-filterを使用する際に注意すべきいくつかの落とし穴があります。

• パフォーマンスの問題： blur()操作は比較的パフォーマンスを消費します。特にモバイル側(cè)では、ファジー値が大きくなるほど、それはより明白です。過度に使用したり、ファジー範囲を制御したりしないことをお勧めします。
• ブラウザの互換性：主流の最新のブラウザはそれをサポートしていますが、IEの古いバージョンのように考えないでください。 Safariは、少しの保険を確保するために-webkit-プレフィックスを追加する必要があります。
• 階層の問題：要素の親が実際のコンテンツや背景を持っていない場合、 backdrop-filterには「フィルター」するものは何もありません。
• 組み合わせフィルター：ぼかして、色相調(diào)整など、複數(shù)の効果を同時に追加できます。

バックドロップフィルター：Blur（8px）飽和（1.5）;

これにより、色のテクスチャをわずかに変更しながらぼやけて、本物のつや消しガラスに近づきます。

基本的にそれだけです。このことは複雑ではありませんが、透明性、親コンテンツが存在するかどうか、パフォーマンスの影響など、詳細を無視するのは簡単です。適切に使用すると、UIはより階層化されます。

以上がCSSを備えたフロストガラスなどのエフェクトに背景フィルターを適用するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。