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的供应商前缀？

Answer 1

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

/* 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代替十六进制表示法.

Answer 2

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

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*/ 

Answer 3

从IE9 beta 1开始,你仍然需要使用他们的专有过滤器.

Answer 4

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代码以在渐变上添加更多停靠点,或使其更复杂(径向渐变,透明度等),但这对于那些简单(垂直)线性渐变非常有用.

Answer 5

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

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;
}

Answer 6

Opera很快就会开始提供渐变支持的构建,以及其他CSS功能.

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

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

我相信很多读者都知道,如果你在CSS3中使用任何东西,你就会做所谓的"渐进式增强" - 支持度最高的浏览器会获得最佳体验.另一部分是"优雅退化",这意味着体验将是令人满意的,但在浏览器实现模块之前可能不是最佳或最具吸引力的,或者模块的一部分与您想要做的事情相关.

这造成了一个奇怪的情况,不幸的是前端开发人员非常沮丧:实现时间不一致.所以这对任何一方来说都是一个真正的挑战 - 你是否责怪浏览器公司,W3C,或者更糟糕的是 - 你自己(善良知道我们无法全部知道!)我们这些为浏览器公司和W3C集团工作的人成员责备自己？您？

当然不是.它总是一场平衡的游戏,到目前为止,我们还没有想到这个平衡点到底在哪里.这是进化技术工作的乐趣:)