CSS의 이미지에 페이드 오버레이를 어떻게 적용합니까?

Question

내 이미지가 div입니다. 예를 들어,이 div의 background-color이 #000 인 경우를 가정 해 봅시다. 이제이 이미지가 왼쪽에서 오른쪽으로 희미 해지기를 바랍니다.

픽셀의 첫 번째 열은 100 % 불투명도로 표시되어야하며 픽셀의 마지막 열은 불투명도가 0/1 %로 표시되어야합니다 (픽셀의 마지막 열은 배경과 혼합됩니다. div).

나는 이것을 CSS에서만 어떻게 할 수 있습니까? 이미지는 항상 50x50입니다.

Answer 1

이 링크가 깨진 DIV http://tinkerbin.com/xXJQrgnk

Answer 2

항상 DIV의 배경색을 미리 알고 있습니까? 항상 단색입니까 (그래디언트, 질감 없음 등)? 이미지의 너비가 대략 같은가? 그렇다면 배경과 같은 색의 PNG를 만들고 오른쪽에 완전히 투명하게 변합니다. 그것은 우리가 그것을 사실적으로 바둑판 식으로 배열 할 것이기 때문에 어떤 높이가 될 수 있습니다.

PNG에 이미지와 동일한 높이를 지정하면 이미지 위에 PNG를 놓으면 이미지가 배경으로 희미 해지는 것처럼 보입니다.