background-size:cover;した画像のデザインについて

Question

###background-size:cover;した画像のデザインについて
プログラミングの勉強としてサイトの模写をしているのですが、、、

画像右側のブラウザのようにbackground-size:cover;で設定した画像を、下に向かうにつれ明るさを下げる処理を行いたいです。

.cover{
  background:url(img/69d2b5b68491a1be3d4a8e7da6b942ca.jpg);
  background-size:cover;
  position:relative;
}

上記に加えて処理を実現できるようなコードを教えてもらえないでしょうか？

Answer 1

linear-gradient で透過色のグラデーションを付加すればいいでしょう。

コード例

.cover{
  background-image: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url(img/69d2b5b68491a1be3d4a8e7da6b942ca.jpg);
  background-size:cover;
  position:relative;
}