結合背景圖像與漸變不適用於我的情況？

演示http://jsfiddle.net/hfkhb9eL/結合背景圖像與漸變不適用於我的情況？

我用這個梯度 background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);和它的工作，但之後我試圖與背景圖像融合它，它不工作，這個什麼錯：

background-image: url(http://i.imgur.com/Hsban3N.jpg), -webkit-linear-gradient(top,rgba(0,0,0,0)0%,rgba(0,0,0,0.65)100%);

？

來源

2015-05-29 Aaron Musktin

更改多梯度代碼中圖像和漸變的順序 –

我認爲你在錯誤的順序圖像/梯度。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: 
 
-webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65) 100%), 
 
    url('http://i.imgur.com/Hsban3N.jpg'); 
 
}

<div>hi</div>

基本上，層疊順序首先聲明是在頂部，接下來是下...等等。

來源

2015-05-29 09:24:13

謝謝！任何想法爲什麼這個http://jsfiddle.net/gsp83wx8/不起作用？ –

除了變量名稱不匹配外，其他都不是真的，但我不是JS/JQ專家。 –

您可以添加漸變：後

div:after{ 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))); 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%); 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%); 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%); 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    content:''; 
    display:block; 

}

http://jsfiddle.net/hfkhb9eL/1/

來源

2015-05-29 09:18:14 gopalraju

謝謝！任何想法爲什麼這jsfiddle.net/gsp83wx8不起作用？ –

結合背景圖像與漸變不適用於我的情況？

回答

相關問題