background-image超簡単な方法で暗くする。何故今までとても面倒な方法で実装していのか

今までbackground-blande-modeやらbackground-colorを使ってほげほげして暗くしてたけどもっと良い方法が見つかったので書いておく。

まぁZENNを使っている優秀なフロントエンダーの方達からしたら「基本中の基本だよねぷーくすくす」って感じだろうけどねっ！

はい

	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url('../images/main.png');

そもそも今までbackground-imageに対して値を2つ以上指定するという発想がなかった件。
んでもってMDNでも「暗くしたい時」とかそういう直接的な表現は無いけど一応例としては書いてあったんよね...

絶対に必要とないと思うけど自分用に解説

background-imageは指定してる値がレイヤーのように重なるらしい。最初に指定している値が一番上に重なるイメージ。
つまり上記の例だとlinear-gradient関数で指定してる黒のグラデが一番上に重なって、画像が暗く見えるようにってわけですね。

終わり！