跨不同浏览器的 CSS 线性渐变格式问题答案

【问题标题】：CSS Linear-gradient formatting issue accross different browsers跨不同浏览器的 CSS 线性渐变格式问题
【发布时间】：2015-12-17 15:04:37
【问题描述】：

我的任务是为网站应用主题，而我获得的主题在 css 文件中有一些我以前从未遇到过的奇怪语法。

主题在 Firefox 和 Chrome 上运行良好，但在 IE 上我遇到了问题。特别是在水平横穿网页的div 栏变得几乎透明，一些对象可以透过它看到。不过，这不会发生在 Firefox 或 IE 上。

当我调查页面源时，我发现 div 具有以下样式选项。 -moz-linear-gradient 和 -webkit-gradient 所以我最初认为这是问题所在。

#aqua_bar_bottom {
        position:fixed;
        bottom:0; right:0; left:0;
        height:33px;
        overflow:hidden;
        background:-moz-linear-gradient(top, #CBCBCB, #A7A7A7);
        background:-webkit-gradient(linear, left top, left bottom,
            from(#CBCBCB),
            to(#A7A7A7)
        );
        border-top:1px solid #515151;
        z-index:102;
}

我通过http://www.w3schools.com/css/css3_gradients.asp 发现这些背景值分配给了 Firefox 和 Chrome，并认为由于我使用的 IE 浏览器应该是线性渐变兼容的，所以我添加了以下行 background:linear-gradient(top, #CBCBCB, #A7A7A7);。

#aqua_bar_bottom {
        position:fixed;
        bottom:0; right:0; left:0;
        height:33px;
        overflow:hidden;
        background:-moz-linear-gradient(top, #CBCBCB, #A7A7A7);
        background:-webkit-gradient(linear, left top, left bottom,
            from(#CBCBCB),
            to(#A7A7A7)
        );
        background:linear-gradient(top, #CBCBCB, #A7A7A7);
        border-top:1px solid #515151;
        z-index:102;
}

但这并没有解决问题，IE 网页似乎没有受到这些更改的影响。

【问题讨论】：

尝试在线从梯度生成器生成

标签： css linear-gradients

【解决方案1】：

你想要：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a7a7a7',GradientType=0 );

这适用于 IE6-9。

10+ 应该识别：

background: linear-gradient(top, #cbcbcb 0%,#a7a7a7 100%);

【讨论】：

【解决方案2】：

将属性从 background 更改为 background-image 并将 top 参数更改为 'to-bottom' 就可以了

background-image:linear-gradient(to bottom, #CBCBCB 0%, #A7A7A7 100%);

【讨论】：