漸變疊加與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>