[css]背景を磨りガラスっぽくするアレ

前より楽になってる気がする。

こうする

黒っぽいガラスにしたいとする。

こんなのがあったとして

<div class="bg_glass"></div>

こう。

.bg_glass{
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,.4);
}

2行で済む。
よかったですね。

ボケ具合をいじりたければbackdrop-filterの値を変える。

白っぽくしたり他の色にしたければbackgroundをいじる。
ここでの注意は、アルファ値を指定して透過させないと背景が透けなくてボカシの意味がないという点。
だから必ずrgba()でやる。
opacityで薄めると要素上に配置したものも透ける。多分みんなそれは望んでないよね。

画像をぼかす効果とか以前から流行ってたり一部で使われたりしているけど、あれは外周もぼやけてしまって、それはそれでいいのだけどそれを望んでない場合も多い。
そうなると領域を指定して、画像を領域よりも大きく設置して、ボケた外周をカットするみたいなそういう面倒くさい感じのアレがある。

こんなのがあったとして

<div class="parent">
    <div class="child"></div>
</div>

こうすると

.parent{
    backdrop-filter: blur(10px);
    .child{
        backdrop-filter: blur(10px);
    }
}

だめ。

子要素のボカシが死ぬ。

これは仕様なのでどうしようもない。

通常の重なっている状態では使いたいことはないだろうけど、positionで位置をずらして配置したときには使いたい場面もでてくると思う。

そういうときは親子にせず、兄弟要素とかにして上手いことやる必要がある。