我的想法是,一个 PNG 覆盖一些文本,透明度从 0% 到 100%,所有颜色都与 CSS 背景颜色相同,会淡出它下面的文本。
原来透明的 PNG 在它应该是透明的区域也是可见的。此外,PNG 和 CSS 的颜色也不相同 - 尽管我使用相同的十六进制值创建它们。
包含一张图片。我曾尝试在 Illustrator、Photoshop 和 Fireworks 中创建资源。我尝试使用 pngcrush、PNGSquash 和 ImageMagick 删除 Gamma 信息 (gAMA)。这个问题在 Firefox 和 Safari 上是一样的。
如果有人知道如何解决这个问题——或者如果可能的话——我很想听听!提前谢谢你。
最佳答案
我无法立即解决您遇到的问题,但我可以提供替代的文本淡入淡出解决方案,如果有用的话?
.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 */
}
关于css - 在相同颜色的 CSS 背景上对齐透明 PNG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1083939/