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/