如何在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放在图像上，它会显示图像正在淡出到背景中。