javascript - 如何实现跨浏览器不透明度渐变(不是颜色渐变)

Question

如何实现跨浏览器的不透明度渐变(不是颜色渐变)？见以下代码:

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div>

它在 IE 中运行良好，但在其他浏览器(如 firefox、safari 等)中运行不佳。firefox 的等效语法是什么？请不要建议我使用渐变图像。

Answer 1

最近的 Firefox 版本有 -moz-linear-gradient，WebKit 浏览器有 -webkit-gradient。通过使用 rgba 颜色应该可以实现这两者的透明度。

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

不过，唯一真正 100% 跨浏览器兼容的解决方案是图像。