CSS 투명한 이미지와 그라데이션이있는 배경

Question

어떻게해야합니까? 내가 가지고있는 것은이 이미지와 이러한 그라데이션이지만 그래디언트 만 표시하고 있으며 둘 다 표시하지는 않습니다.

div { 
    background: url(/Icons/icon.png) no-repeat; 
    background-image: -moz-linear-gradient(top, #a2a2a2, #878787); 
    background-image: -ms-linear-gradient(top, #a2a2a2, #878787); 
    background-image: -o-linear-gradient(top, #a2a2a2, #878787); 
    background-image: -webkit-linear-gradient(top, #a2a2a2, #878787); 
    background-image: linear-gradient(top, #a2a2a2, #878787); 
} 

Answer 1

여러 배경 이미지가 필요한 것처럼 들립니다. 논리적으로 그라디언트가 배경색 인 것처럼 보일 수도 있지만 브라우저는 그라디언트 정보를 배경 이미지처럼 처리합니다.

같은 것을보십시오 :

div{ 
    background-image: -moz-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png); 
    background-image: -ms-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png); 
    background-image: -o-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png); 
    background-image: -webkit-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png); 
    background-image: linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png); 
    background-repeat: no-repeat, no-repeat; 
}