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

【问题标题】：How to implement Cross Browser Opacity Gradient (Not Color Gradient)如何实现跨浏览器不透明度渐变（不是颜色渐变）
【发布时间】：2023-04-10 04:20:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css cross-browser opacity

【解决方案1】：

-moz-linear-gradient 用于最新的 Firefox 版本，-webkit-gradient 用于 WebKit 浏览器。使用rgba 颜色应该可以使这两个透明化。

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

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

【讨论】：

这个答案对于这个问题是不正确的。似乎没有与古代 IE 的过滤器等效的功能：通过 CSS 用于 mozilla 或 gecko 的 alpha start/finish。
我一直在试图弄清楚如何让图像具有水平线性渐变不透明度，以便之前的 div 的垂直渐变可以显示出来。这是因为在我的应用中，用户会上传需要不透明度渐变的图片，所以解决方案必须是纯css/js。
它适用于 IE，但显然您不能将线性不透明度渐变应用于图像背景。当您使用 rgba 线性渐变时，moz 和 gecko 实际上会创建一个图像，并且渐变显然只能在一个方向上移动。要获得我们想要的效果，您需要能够为不透明度指定一个方向渐变，为颜色渐变指定另一个方向渐变。
@PlayGod 你的 cmets 有点太不透明了，我无法完全理解。也许您会想添加另一个答案或问题。不过，适当的注释。

【解决方案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)";

【讨论】：