[HTML & CSS General] CSS background image with color overlay

公開日: 2019/01/24

ボックスに敷いた背景画像の上に半透明のカラーを被せます。

background: linear-gradient() を利用する方法が良いですね。

background-position と background-size で画像の覆い方と位置を調整します。

See the Pen
CSS background image with color overlay by DriftwoodJP (@DriftwoodJP)
on CodePen.

入れ替えると画像が消えてしまうので、この順番で追記します。

また background の shorthand で書こうとすると落とし穴がありますね。
url() center center / cover; で。

補遺

tinted で色の付いたという意味なんだ。