css - 単一行の CSS を使用した画像のグラデーション オーバーレイ

Question

このコードを使用して背景画像にグラデーションを付けようとしています

background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;

画像を取得していますが、グラデーションが適用されていません

Answer 1

最初にグラデーションを追加してから、次のように画像の URL を追加します。

background: linear-gradient(rgba(244, 67, 54, 0.95),
                            rgba(33, 150, 243, 0.75),
                            rgba(139, 195, 74, 0.75),
                            rgba(255, 87, 34, 0.95)),
                            url("http://placehold.it/200x200");

または、以下のスニペットを見てください。

.bg {
  background: linear-gradient(
    rgba(244, 67, 54, 0.45),
    rgba(33, 150, 243, 0.25),
    rgba(139, 195, 74, 0.25),
    rgba(255, 87, 34, 0.45)),
    url("http://placehold.it/200x200");
  width: 200px;
  height: 200px;
}

<div class="bg"></div>

お役に立てれば！