css - 在相同颜色的 CSS 背景上对齐透明 PNG

Question

我的想法是，一个 PNG 覆盖一些文本，透明度从 0% 到 100%，所有颜色都与 CSS 背景颜色相同，会淡出它下面的文本。

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

包含一张图片。我曾尝试在 Illustrator、Photoshop 和 Fireworks 中创建资源。我尝试使用 pngcrush、PNGSquash 和 ImageMagick 删除 Gamma 信息 (gAMA)。这个问题在 Firefox 和 Safari 上是一样的。

如果有人知道如何解决这个问题——或者如果可能的话——我很想听听!提前谢谢你。

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 */
               }