Life is Tech! Lesson
オリジナル制作サンプル集
背景に好きな色のフィルターをかける
難易度：
プロパティ：background-blend-mode
関連レッスン：Chapter 1 レッスン 1
できあがりイメージ
つくりかた
Step1
フィルターをかける要素をHTMLから探す
HTML
<header>
<h1>Mom’s Bakery</h1>
</header>
このHTMLのheaderタグで囲まれているところに対し、CSSを反映させていきます。
Step2
フィルターをかける要素のCSSセレクタを探す
CSSのセレクタで header を探しましょう。
CSS
header {
background-image: url(img/bg_header.jpg); /* 背景画像 */
background-size: cover; /* 背景画像の表示方法 */
height: 450px; /* 高さ */
padding-top: 150px; /* 上がわの余白 */
}
サンプルでは header に反映させますが、CSSで背景画像を指定している箇所であれば、反映させることができます。
Step3
背景色を指定する
フィルターをかけたい色を background-color で指定します。
CSS
header {
background-color: aqua;
background-image: url(img/bg_header.jpg); /* 背景画像 */
background-size: cover; /* 背景画像の表示方法 */
height: 450px; /* 高さ */
padding-top: 150px; /* 上がわの余白 */
}
サンプルでは aqua (明るいブルー) を指定しました。好きな色を指定してみましょう。カラーコードやRGBで指定することも可能です。
Step4
背景画像と背景色をなじませる
background-blend-mode:multiply; を追加して背景になじませます。
CSS
header {
background-color: aqua;
background-blend-mode:multiply;
background-image: url(img/bg_header.jpg); /* 背景画像 */
background-size: cover; /* 背景画像の表示方法 */
height: 450px; /* 高さ */
padding-top: 150px; /* 上がわの余白 */
}
background-blend-modeは、フィルターの種類を指定することができます。
multiply は指定した色と写真の色を掛け合わせたような色にできるフィルターです。
※指定する色によってはうまく反映されない場合があります。
Step5
コードを書くかコピー＆ペーストする
CSS
background-color: aqua;
background-blend-mode:multiply;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
ワンポイント解説
フィルターの種類が multiply だと色がうまくなじまない場合は、background-blend-modeをscreenやoverlayに変更してみましょう！
CSS
/* 緑色にscreenを指定 */
background-color: green;
background-blend-mode: screen;
/* 緑色にoverlayを指定 */
background-color: green;
background-blend-mode: overlay;
Step6
実際の見え方を確認する
背景画像に色のフィルターがかかっていたら完成です。
