Weblasts

すりガラス風背景を作るプロパティ

backdrop-filterプロパティ

なんか必殺技みたいな名前のプロパティですが、背景をすりガラスのように透過させることができます。
親要素に背景画像を付けて、子要素をすりガラス風にすると捗りそうですね。

主要なブラウザ対応状況はこんな感じです

※ webkit系はベンダープレフィックスを付ければ対応できます。

使える値

フィルター用の関数が使えるようですが、すりガラスにするのであれば「blur」だけで充分です
関数なので「blur」の後に()を付けてpx単位でぼやけ具合を指定するようです。
値が大きいほどぼやけるようになります

上にあるDEMOのページのコードはこちら
テキストは簡略化しておきます

こちらがCSS
必要がないと思われる部分は省略しています

このサンプルではただすりガラス風にしていますが、
rgbaを使って透過する背景色と合わせるとステンドグラス風にすることもできます。

背景色も一緒に指定してみる

透過させた赤を使ってみるとこのようになります

sample①

親要素のdivには背景画像が貼ってあります
余計なコードは省いています

要素を一杯増やしてカラフルにもできそうですね

cssでそれぞれの要素に別の色を指定しているだけなのでコードは割愛します
マウスオンで動くようにしてあります 簡単なコードだけで実装できるのでお試しあれ

POPULAR