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

公開日: 2019/01/24

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

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

> * [background | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background#linear-gradient())
> * [linear-gradient() | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient)
> * [Can I use… Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=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;` で。

## 補遺

> * [CSS グラデーションの利用 | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)

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

> * [Tinted Images with Multiple Backgrounds | CSS-Tricks](https://css-tricks.com/tinted-images-multiple-backgrounds/)
> * [Perfect Full Page Background Image | CSS-Tricks](https://css-tricks.com/perfect-full-page-background-image/)