jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

backdrop-filterについて

css

backdrop-filterとは

要素の背後に対してぼかしなどの処理を入れることができるプロパティ。

APPLEのTOPページのheader部分で使われているものになります。

サポート状況

2019年12月10日の状況

f:id:jackswim3411:20191210105807p:plain

参考: https://caniuse.com/#search=backdrop-filter

実装

  • 基本的な書き方
.className {
  background-color: rdba(0,0,0,0.8);
  backdrop-filter: grayscale(1);
}

表示参考

See the Pen backdrop-filter demo by Robin Rendle (@robinrendle) on CodePen.

対応していないブラウザの対応方法

方法① @supportsを使う

backdrop-filterの対応しているブラウザが少ないので、

.className {
  background-color: #fff;
  @supports (backdrop-filter: saturate(180%) blur(20px)) {
    background-color: rdba(0,0,0,0.8);
    backdrop-filter: grayscale(1);
  }
}

のように記載して対応しているブラウザのみに適応させる。

@supportsについての参考リンク

方法② polyfill対応

backdropjsをインストールして適応させる。

実行結果

Example Domain

参考リンク一覧