Fond dégradé css avec plusieurs images

Question

Je souhaite créer un bouton avec un arrière-plan texturé, un dégradé et une icône alignée sur la gauche. C'est le code que j'ai, mais le dégradé d'arrière-plan ne s'affiche pas.

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

J'ai finalement trouvé la réponse. C'est une solution de contournement mais j'ai ajouté un span à l'intérieur du bouton avec la même largeur et la même hauteur et je l'ai défini pour être transparent, puis en survolant le bouton, je fais une transition sur l'opacité du bouton. De cette façon, je peux simuler la transition avec plusieurs arrière-plans et un dégradé.

http://jsfiddle.net/gBDAy/