我有一个div
内的图像。举例来说,让我们说这个div有background-color
的#000
。现在,我希望此图像从左侧向右侧淡出。如何在CSS中的图像上应用淡入淡出效果?
我的意思是,第一列像素应该显示为100%不透明度,而最后一列像素应该显示为0/1%不透明度(最后一列像素将与背景混合div)。
我该如何纯粹在CSS中做到这一点?图像将始终为50x50。
我有一个div
内的图像。举例来说,让我们说这个div有background-color
的#000
。现在,我希望此图像从左侧向右侧淡出。如何在CSS中的图像上应用淡入淡出效果?
我的意思是,第一列像素应该显示为100%不透明度,而最后一列像素应该显示为0/1%不透明度(最后一列像素将与背景混合div)。
我该如何纯粹在CSS中做到这一点?图像将始终为50x50。
你可以覆盖在图像 的顶格并设置梯度格 http://tinkerbin.com/xXJQrgnk
您是否总是提前知道DIV的背景颜色?它总是一个纯色(不是渐变,没有纹理等)?你的图像宽度大致相同吗?如果是这样,我会创建一个与背景颜色相同的PNG,并使其在右侧完全透明。它可以是任何高度,因为我们会将其平铺。
将PNG放在与图像高度相同的图像上后,将PNG放在图像上,它会显示图像正在淡出到背景中。
这个环节被打破。任何机会,你可以重新发布答案内联?或移动到jsfiddle? – Trent 2014-05-29 14:45:20