Градиент накладывается на изображения с одной строки 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>

Надеется, что это помогает!

Answer 2

div { 
 
    width: 350px; 
 
    height: 350px; 
 
    background: linear-gradient(to bottom right, rgba(0,47,75,.9), rgba(220,66,37,.9)), url(http://placehold.it/350x350); 
 
    background-size: cover; 
 
    
 
}

<div></div>