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

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

还有-moz-linear-gradient近期的Firefox版本和-webkit-gradient针对WebKit浏览器.应该可以通过使用rgba颜色来实现这两者的透明度.

自由软件网站
管理员/网站

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

Answer 2

谢谢@deceze,

我正在为具有相同要求的其他人编写示例css

top:0px;
    opacity: 0.6;       
    width: 1944px; 
    height: 896px; 
    position: absolute; 
    z-index: 500;
background-color:#dcdcdc;
        /* For WebKit (Safari, Google Chrome etc) */
        background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0)));
        /* For Mozilla/Gecko (Firefox etc) */
        background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0));
        /* For Internet Explorer 5.5 - 7 */
        filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)";