backdrop-filterプロパティの説明
CSSのbackdrop-filter
プロパティは、要素の背後領域にぼかしや色変化などのフィルタ効果を与えます。これは二つ以上のレイヤー状に重なった要素に対して有効です。例えば、背景画像を持つ親要素の中に、それよりも小さい範囲の子要素を設置して、その子要素が持つサイズに対してだけ、フィルタを掛けることができます。
これにより、以前では画像編集ソフトを使わなければできなかった表現が可能となりました。特に、画像に対して非破壊的にグラフィック効果を追加できる点は、ウェブ制作の柔軟性を強化してくれる強みと言えるでしょう。
backdrop-filterに指定できる値
none
- フィルタ効果を与えません。これが初期値です。
<filter-function-list>
- CSSで使える
<filter-function>
またはSVGフィルタの値を空白区切りで指定します。各値を以下に示します。 blur()
- ぼかしの度合いを指定します。かっこの中には、ガウス関数の標準偏差を示す単位つきの数値が入ります。ここで指定した値が画面上のピクセルを互いにいくつ混合するかということの半径を表します。
brightness()
- 明るさの度合いを指定します。かっこの中には、元の画像を基準にした割合や数値が入ります。例えば
200%
や2
を入れれば二倍の明るさになり、50%
や0.5
を入れれば半分の明るさになります。 contrast()
- コントラストの度合いを指定します。かっこの中には、元の画像を基準にした割合や数値が入ります。例えば
200%
や2
を入れれば二倍のコントラストになり、50%
や0.5
を入れれば半分のコントラストになります。 drop-shadow()
- 要素に含まれる画像に影を与えます。かっこの中には、影のオフセット値やぼかしの半径が入ります。この効果は要素全体の範囲ではなく、画像自体の形に合った影を作成します。
grayscale()
- 色をグレースケールに変化させます。かっこの中には、彩度をどの程度まで落とすかを示す割合や数値が入ります。例えば、完全なグレースケールは
100%
か1
で表されます。 hue-rotate()
- 色相の変更を指定します。かっこの中には、色相環を回転させる角度が入ります。例えば、
180deg
や.5turn
は色相を対極に変更したことを表します。 invert()
- 色を反転させる度合いを指定します。かっこの中には、反転させる割合や数値が入ります。例えば、色を完全に反転する場合は
100%
または1
を記述します。 opacity()
- 色の透明度を指定します。かっこの中には、透明度を示す割合や数値が入ります。例えば、
50%
または.5
は半透明となります。 saturate()
- 彩度を変化させる度合いを指定します。かっこの中には、彩度を示す割合や数値が入ります。例えば、
50%
または.5
を指定すると彩度が下がりくすんだ色になります。 sepia()
- 色をセピア調に変化させます。かっこの中には、色調をどの程度変化させるかを示す割合や数値が入ります。例えば、
100%
や1
を指定すると完全なセピア調になります。
backdrop-filterの使い方とサンプルコード
backdrop-filter
プロパティの構文は以下の通りです。
/* キーワード値 */
backdrop-filter: none;
/* <filter-function>値 */
backdrop-filter: blur(3px);
backdrop-filter: brightness(50%);
backdrop-filter: contrast(.5);
backdrop-filter: drop-shadow(5px 5px 10px #000);
backdrop-filter: grayscale(0.3);
backdrop-filter: hue-rotate(180deg);
backdrop-filter: invert(60%);
backdrop-filter: opacity(24%);
backdrop-filter: saturate(.3);
backdrop-filter: sepia(86%);
/* 複数の値 */
backdrop-filter: blur(5px) drop-shadow(3px 3px 10px #000);
/* グローバル値 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;
backdrop-filterの実例
それでは実際にbackdrop-filter
プロパティの書き方を見ていきましょう。以下の内容で、各フィルタに参考値を入れて出力した時の挙動を確認できます。
<section class="samp_box">
<div><span id="bf_blur">blur</span></div>
<div><span id="bf_brightness">brightness</span></div>
<div><span id="bf_contrast">contrast</span></div>
<div><span id="bf_drop_shadow">drop-shadow</span></div>
<div><span id="bf_grayscale">grayscale</span></div>
<div><span id="bf_hue_rotate">hue-rotate</span></div>
<div><span id="bf_invert">invert</span></div>
<div><span id="bf_opacity">opacity</span></div>
<div><span id="bf_saturate">saturate</span></div>
<div><span id="bf_sepia">sepia</span></div>
</section>
.samp_box > div {
margin-top: 1rem;
padding: 3rem 1rem;
background: url(/images/sample_photo_1200x630.jpg) no-repeat;
background-size: cover;
text-align: center;
}
div > span {
display: inline-block;
width: 200px;
padding: 2rem 0;
border-radius: 5px;
}
#bf_blur {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
#bf_brightness {
backdrop-filter: brightness(150%);
-webkit-backdrop-filter: brightness(150%);
}
#bf_contrast {
backdrop-filter: contrast(150%);
-webkit-backdrop-filter: contrast(150%);
}
#bf_drop_shadow {
backdrop-filter: drop-shadow(5px 5px 3px #000);
-webkit-backdrop-filter: drop-shadow(5px 5px 3px #000);
}
#bf_grayscale {
backdrop-filter: grayscale(100%);
-webkit-backdrop-filter: grayscale(100%);
}
#bf_hue_rotate {
backdrop-filter: hue-rotate(180deg);
-webkit-backdrop-filter: hue-rotate(180deg);
}
#bf_invert {
backdrop-filter: invert(100%);
-webkit-backdrop-filter: invert(100%);
}
#bf_opacity {
backdrop-filter: opacity(.5);
-webkit-backdrop-filter: opacity(.5);
}
#bf_saturate {
backdrop-filter: saturate(.5);
-webkit-backdrop-filter: saturate(.5);
}
#bf_sepia {
backdrop-filter: sepia(1);
-webkit-backdrop-filter: sepia(1);
}
drop-shadowが効かない時の解決策
backdrop-filter
に指定できる値の中で、drop-shadow
の挙動には少しクセがあります。この機能を有効にする場合、親要素にopacity
を追加し、その値を1
未満(0.9999など)にすると表示されるようです。ただし、このやり方は完全ではありません。まず、対応していないブラウザではこのやり方自体が無視されます。また要素の透明度を少なからず変えてしまうため、厳密なデザイン性が失われてしまいます。ドロップシャドウで要素に影を付けたい場合は、filter
プロパティでの代替を検討して下さい。
<div class="samp_box">
<div class="samp_bg">
background
<span class="samp_ds">drop-shadow</span>
</div>
</div>
.samp_box {
position: relative;
width: 100%;
min-height: 200px;
padding: 10px;
background-color: #ccc;
}
.samp_bg {
width: 200px;
height: 100px;
background-color: #f00;
opacity: .9999;
}
.samp_ds {
position: absolute;
top: 60px;
left: 110px;
width: 200px;
height: 100px;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: drop-shadow(5px 5px 3px #333);
}