css具有多個圖像的背景漸變

Question

我想創建一個具有帶紋理背景，漸變和左對齊的圖標的按鈕。這是我有的代碼，但沒有顯示背景漸變。

background:#B1D521; 
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%); 
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -o-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%); 
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -moz-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%); 
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -webkit-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%); 
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -ms-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%); 
background-repeat:no-repeat, repeat; 
background-position:10% center; 

Answer 1

我終於想出了答案。這是一種解決方法，但我在按鈕中添加了寬度和高度相同的跨度，並將其設置爲透明，然後將鼠標懸停在按鈕上，我會對按鈕的不透明度進行轉換。這樣我可以僞造多個背景和漸變的過渡。

http://jsfiddle.net/gBDAy/