背景に好きな色のフィルターをかける

できあがりイメージ

つくりかた

Step2 フィルターをかける要素のCSSセレクタを探す

CSSのセレクタで header を探しましょう。
サンプルでは header に反映させますが、CSSで背景画像を指定している箇所であれば、どこでも反映させることができます。

Step3 背景色を指定する

フィルターをかけたい色を background-color で指定します。
サンプルでは aqua (明るいブルー) を指定しました。好きな色を指定してみましょう。
カラーコードやRGBで指定することも可能です。

Step4 背景画像と背景色をなじませる

background-blend-mode:multiply; を追加して背景になじませます。
background-blend-modeは、フィルターの種類を指定することができます。
multiply は指定した色と写真の色を掛け合わせたような色にできるフィルターです。
※指定する色によってはうまく反映されない場合があります。

Step5 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6 実際の見え方を確認する

タイトルの下に点線がついていたら完成です。