如何在CSS中的圖像上應用淡入淡出效果？

Question

我有一個div內的圖像。舉例來說，讓我們說這個div有background-color的#000。現在，我希望此圖像從左側向右側淡出。

我的意思是，第一列像素應該顯示爲100％不透明度，而最後一列像素應該顯示爲0/1％不透明度（最後一列像素將與背景混合div）。

我該如何純粹在CSS中做到這一點？圖像將始終爲50x50。

Answer 1

你可以覆蓋在圖像 的頂格並設置梯度格 http://tinkerbin.com/xXJQrgnk

Answer 2

您是否總是提前知道DIV的背景顏色？它總是一個純色（不是漸變，沒有紋理等）？你的圖像寬度大致相同嗎？如果是這樣，我會創建一個與背景顏色相同的PNG，並使其在右側完全透明。它可以是任何高度，因爲我們會將其平鋪。

將PNG放在與圖像高度相同的圖像上後，將PNG放在圖像上，它會顯示圖像正在淡出到背景中。