여러 이미지가있는 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/