Question

我的想法是，覆盖一些文本的PNG，透明度从0％到100％，所有颜色都与CSS背景颜色相同，会淡化其背后的文本。

原来透明的PNG在它应该透明的区域也是可见的。此外，PNG和CSS的颜色不一样 - 即使我使用相同的十六进制值创建它们。

包含图像。我尝试在Illustrator，Photoshop和Fireworks中创建资源。我尝试用pngcrush，PNGSquash和ImageMagick删除gamma信息（gAMA）。 Firefox和Safari中的问题相同。

如果有人知道如何解决这个问题 - 或者如果有可能的话 - 我很乐意听到它！提前谢谢。

the gradient is visible even though transparent

Answer 1

我无法立即解决您遇到的问题，但如果有任何用途，我可以提供替代的文字淡出解决方案吗？

.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */
               }

最后0.0的值是alpha值，范围从0到1，0是不透明的，1是透明。在我尝试过的情况下，rgba在Firefox以外的浏览器上存在问题。

也许

.text-to-fade {opacity: 0.5; /* for most browsers */
               filter: alpha(opacity=50); /* for IE */
               }

Answer 2

它看起来是不同颜色的原因是因为它是透明的，而不是因为颜色实际上是不同的。要演示此操作，请打开支持图层的图像编辑器。创建白色底层和黑色顶层。将黑色图层的不透明度设置为50％并合并图层。使用颜色选择器检查颜色。它将是＃808080，而不是黑色。

它不褪色的原因是因为这种颜色是添加剂。说你的文字也是＃808080：在有文字的地方，你有＃808080覆盖＃808080 - 最终会像＃424242那样，而不是像你想要的那样取消。只需一步就可以在Web浏览器中完成您想要做的事情。

要做的一件事是使用javascript使文本不可见（visibility：hidden;）。另一个选择是使用相对或绝对定位并设置z-indices，所以事情看起来像这样：

这将阻止文本并留下其他部分可见的内容。