すりガラス風背景を作るプロパティ
backdrop-filterプロパティ
なんか必殺技みたいな名前のプロパティですが、背景をすりガラスのように透過させることができます。
親要素に背景画像を付けて、子要素をすりガラス風にすると捗りそうですね。
主要なブラウザ対応状況はこんな感じです
※ webkit系はベンダープレフィックスを付ければ対応できます。
使える値
フィルター用の関数が使えるようですが、すりガラスにするのであれば「blur」だけで充分です
関数なので「blur」の後に（）を付けてpx単位でぼやけ具合を指定するようです。
値が大きいほどぼやけるようになります
|
1 2 3 4 |
すりガラス風の背景にしたい要素{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } |
上にあるDEMOのページのコードはこちら
テキストは簡略化しておきます
|
1 2 3 4 5 6 7 8 9 |
<body> <section> <h2>見出し</h2> <p> 段落 </p> <div><a href="#">ボタン</a></div> </section> </body> |
こちらがCSS
必要がないと思われる部分は省略しています
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body{ width: 100%; height: 100vh; background: url(bg.jpg); background-size: cover; background-position: center center; } section{ width: 50%; height: 100vh; backdrop-filter:blur(10px);/*すりガラス用プロパティ*/ -webkit-backdrop-filter:blur(10px);/*ベンダープレフィックス*/ } |
このサンプルではただすりガラス風にしていますが、
rgbaを使って透過する背景色と合わせるとステンドグラス風にすることもできます。
背景色も一緒に指定してみる
透過させた赤を使ってみるとこのようになります
sample①
|
1 2 3 |
<div> <p>sample①</p> </div> |
親要素のdivには背景画像が貼ってあります
余計なコードは省いています
|
1 2 3 4 5 6 7 8 |
p{ width: 50%; height: 100%; backdrop-filter:blur(5px);/*すりガラス用プロパティ*/ -webkit-backdrop-filter:blur(5px);/*ベンダープレフィックス*/ /*赤っぽいすりガラスにする背景色*/ background-color:rgba(255,0,0,.2); } |
要素を一杯増やしてカラフルにもできそうですね
赤
緑
青
|
1 2 3 4 5 |
<div> <p>赤</p> <p>緑</p> <p>青</p> </div> |
cssでそれぞれの要素に別の色を指定しているだけなのでコードは割愛します
マウスオンで動くようにしてあります
簡単なコードだけで実装できるのでお試しあれ
