css - Internet Explorer 9 中的渐变

Question

有谁知道 IE9 中渐变的供应商前缀，还是我们仍然应该使用他们的专有过滤器？

我对其他浏览器的了解是：

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

作为奖励，有人也知道 Opera 的供应商前缀吗？

score 58 · Accepted Answer

看起来我参加聚会有点晚了，但这里有一些顶级浏览器的示例：

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

来源：http: //ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

注意：所有这些浏览器也支持 rgb/rgba 代替十六进制表示法。

score 47 · Accepted Answer

最好的跨浏览器解决方案是

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

score 45 · Accepted Answer

45

从 IE9 beta 1 开始，您仍然需要使用他们的专有过滤器。

于 2010-10-14T17:02:16.240 回答

score 37 · Accepted Answer

IE9 目前缺乏 CSS3 渐变支持。然而，这是一个很好的解决方案，使用 PHP 来返回 SVG（垂直线性）渐变，它允许我们将设计保留在样式表中。

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

只需将其上传到您的服务器并像这样调用 URL：

gradient.php?from=f00&to=00f

这可以与您的 CSS3 渐变一起使用，如下所示：

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

如果您需要针对 IE9 以下的目标，您仍然可以使用旧的专有“过滤器”方法：

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

当然，您可以修改 PHP 代码以在渐变上添加更多停止点，或者使其更复杂（径向渐变、透明度等），但这对于那些简单的（垂直）线性渐变非常有用。

score 11 · Accepted Answer

我用于所有浏览器渐变的代码：

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

您需要指定一个高度或zoom: 1应用hasLayout到该元素才能在 IE 中工作。

更新：

这是一个 LESS Mixin (CSS) 版本，供所有 LESS 用户使用：

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

score 6 · Accepted Answer

Opera 将很快开始提供支持渐变以及其他 CSS 功能的构建。

W3C CSS 工作组甚至还没有完成 CSS 2.1，你们都知道，对吧？我们打算很快完成。CSS3 是精确模块化的，因此我们可以更快地将模块移动到实现，而不是整个规范。

每个浏览器公司都使用不同的软件周期方法、测试等。所以这个过程需要时间。

我相信很多很多读者都知道，如果你在 CSS3 中使用任何东西，你就是在做所谓的“渐进式增强”——支持最多的浏览器会获得最好的体验。另一部分是“优雅降级”，这意味着体验将是令人愉快的，但可能不是最好的或最具吸引力的，直到该浏览器实现了模块，或者与您想要做的事情相关的模块部分。

这造成了一种非常奇怪的情况，不幸的是前端开发人员因以下原因而感到非常沮丧：实现时间不一致。所以这对任何一方来说都是一个真正的挑战——你是责怪浏览器公司、W3C，还是更糟——你自己（天知道我们不可能全都知道！）我们这些为浏览器公司和 W3C 小组工作的人呢？会员自责？你？

当然不是。这始终是一场平衡游戏，到目前为止，作为一个行业，我们还没有弄清楚平衡点到底在哪里。这就是从事进化技术工作的乐趣:)

score 4 · Accepted Answer

我知道 IE9 仍然不支持 CSS 渐变。真可惜，因为它支持大量其他很棒的新东西。

您可能希望将CSS3Pie视为一种让所有版本的 IE 都支持各种 CSS3 功能（包括渐变，但也包括边框半径和框阴影）的方法，而无需大惊小怪。

我相信 CSS3Pie 可以与 IE9 一起使用（我已经在预发布版本上尝试过，但还没有在当前的 beta 版本上尝试过）。

score 2 · Accepted Answer

不确定 IE9，但 Opera 似乎还没有任何渐变支持：

http://www.opera.com/docs/specs/presto26/#css

该页面上没有出现“渐变”。

Robert Nyman 有一篇很棒的文章，关于让 CSS 渐变在所有非 Opera 浏览器中工作：

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

不确定是否可以扩展以使用图像作为后备。

score 2 · Accepted Answer

从版本 11 开始，Opera 支持带有 -o- 供应商前缀的线性渐变。Chris Mills 写了一篇关于它的 Dev.Opera 文章：http ://dev.opera.com/articles/view/css3-linear-gradients/

径向渐变仍在开发中（无论是在规范中还是在 Opera 中）。

score 1 · Accepted Answer

1

使用渐变生成器 - 一切都会完美；) http://www.colorzilla.com/gradient-editor/

于 2012-07-12T09:42:14.650 回答

css - Internet Explorer 9 中的渐变

10 回答 10

Related

Reference