[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説

ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 「backdrop-filter」だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ 「backdrop-filter」だと、一行のコードで実装できる 私はbackdrop-filterとい

[coliss]

ガラス板のような美しいエフェクトを与えるbackdrop-filterの解説、ポリフィル有り

[xlc]

そんなに頑張らなくても background: rgba で透明度を指定すれば十分なのでは。

[takamatumoto7]

“backdrop-filter”こんなプロパティがあるんだ。Chromeは未対応か

[sedna796]

CSS

[syonx]

backdrop-filter: blur(3px);

[tsuki-rs]

ChromeやFifefox未対応なのにEdge対応してて草。もっと別の対応しろよEdge