2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] backdrop-filterで要素の背後のグラフィック効果を指定しよう!

backdrop-filterの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.backdrop-filterとは?

backdrop-filterプロパティは要素の背後の領域に適用するぼかしや色変化などのグラフィック効果を指定します。

値の指定方法は以下の通りです。

{ backdrop-filter: 値; }

値の指定方法

基本的に値の指定方法はfilterプロパティと同じです。

  • none
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url()




2.backdrop-filterの使い方

それではbackdrop-filterの使い方をみていきましょう。

.box01 {
 background-color: rgba(31, 20, 11, 0.5);
 backdrop-filter: blur(10px);
}

上記のように、ぼかすための値であるblur()を使えば、かっこいい見た目のボックスを実装できます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です