渐变叠加与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>