背景にフィルターをかける方法はいくつかあります。
それぞれ特徴がありますので、解説していきます。
① filterプロパティを利用する
CSSのfilterプロパティを使用して、要素全体にフィルターを適用することができます。例えば、blurやgrayscaleなどの値を指定することで、ぼかしや白黒化などのエフェクトを実現できます。
例 .background: grayscale(50%);
filterはgrayscale以外に最近よく使用されるblur(ぼかし), contrast(コントラスト), brightness（明るさ）, sepia(セピア)など様々な表現が可能です。
しかし、子要素を含めて影響を及ぼしてしまうため、注意が必要です。
(モーダルやドロワーを親要素の中に入れていますとモーダルやドロワーにもフィルターがかかってしまいます)
③ 背景画像に疑似要素でフィルターをかける
背景画像に対してフィルターをかけることもできます。この場合、::beforeまたは::after擬似要素を使用して、背景画像の上にフィルターをかけます。疑似要素を使わずに、直接指定してしまうと画像などにフィルターがかかりません。
例 .background::before {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
}
モーダルやドローワー使用時によく使用する方法です。最初の頃は直接背景に指定してしまい、画像などが適用されず、苦労したのを覚えています。
