如何实现跨浏览器不透明度渐变（不是颜色渐变）

问题描述：

如何实现跨浏览器不透明度渐变（不是颜色渐变）？请参见下面的代码：
如何实现跨浏览器不透明度渐变（不是颜色渐变）

<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..etc。什么是Firefox的等效语法？请不要建议我使用渐变图像。

答

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

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://developer.apple.com/safari/library/documentation/...

唯一真正的100％的跨浏览器兼容的解决方案是一种图像虽然。

这个答案是不适合的问题是正确的。似乎并没有与古代IE浏览器的过滤器相同：通过CSS实现mozilla或gecko的alpha开始/结束。 – PlayGod 2012-12-04 15:23:03

我一直想弄清楚如何让图像具有水平线性渐变不透明度，所以先前的div的垂直渐变可以透过。这是因为在我的应用程序中，用户将上传需要不透明度渐变的图像，所以解决方案必须是纯css/js。 – PlayGod 2012-12-04 15:23:45

它可以与IE一起工作，但实际上不能将线性不透明渐变应用于图像背景。当你使用rgba线性渐变时，moz和gecko实际上会创建一个图像，并且渐变显然只能朝一个方向进行。为了获得我们之后的效果，您需要为不透明度指定一个方向渐变，并为颜色渐变指定另一个方向渐变。 – PlayGod 2012-12-04 15:24:17

答

感谢@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)";

如何实现跨浏览器不透明度渐变（不是颜色渐变）

相关推荐