CSS Internet Explorer 9 中的渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3934693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gradients in Internet Explorer 9
提问by Sniffer
Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?
有谁知道 IE9 中渐变的供应商前缀，还是我们仍然应该使用他们的专有过滤器？
What I've got for the other browsers is:
我对其他浏览器的了解是：
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 */
As a bonus does anyone know Opera's vendor prefix as well?
作为奖励，有人也知道 Opera 的供应商前缀吗？
采纳答案by Gaurav
You still need to use their proprietary filters as of IE9 beta 1.
从 IE9 beta 1 开始，您仍然需要使用他们的专有过滤器。
回答by Kevin Arthur
Looks like I'm a little late to the party, but here's an example for some of the top browsers:
看起来我参加聚会有点晚了，但这里有一些顶级浏览器的示例：
/* 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%);
Source: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
来源：http: //ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Note: all of these browsers also support rgb/rgba in place of hexadecimal notation.
注意：所有这些浏览器也支持 rgb/rgba 代替十六进制表示法。
回答by goksel
The best cross-browser solution is
最好的跨浏览器解决方案是
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*/
回答by neave
IE9 currently lacks CSS3 gradient support. However, here is a nice workaround solution using PHP to return an SVG (vertical linear) gradient instead, which allows us to keep our design in our stylesheets.
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>
Simply upload it to your server and call the URL like so:
只需将其上传到您的服务器并像这样调用 URL：
gradient.php?from=f00&to=00f
This can be used in conjunction with your CSS3 gradients like this:
这可以与您的 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);
}
If you need to target below IE9, you can still use the old proprietary 'filter' method:
如果您需要针对 IE9 以下的目标，您仍然可以使用旧的专有“过滤器”方法：
.ie7 .my-color, .ie8 .my-color {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}
Of course you can amend the PHP code to add more stops on the gradient, or make it more sophisticated (radial gradients, transparency etc.) but this is great for those simple (vertical) linear gradients.
当然，您可以修改 PHP 代码以在渐变上添加更多停止点，或者使其更复杂（径向渐变、透明度等），但这对于那些简单（垂直）线性渐变非常有用。
回答by Blowsie
The code I use for all browser gradients:
我用于所有浏览器渐变的代码：
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;
You will need to specify a height or zoom: 1to apply hasLayoutto the element for this to work in IE.
您需要指定高度或zoom: 1应用于hasLayout元素才能在 IE 中工作。
Update:
更新：
Here is a LESS Mixin (CSS) version for all you LESS users out there:
这是一个适用于所有 LESS 用户的 LESS Mixin (CSS) 版本：
.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;
}
回答by mollydotcom
Opera will soon start having builds available with gradient support, as well as other CSS features.
Opera 将很快开始提供具有渐变支持以及其他 CSS 功能的构建版本。
The W3C CSS Working Group is not even finished with CSS 2.1, y'all know that, right? We intend to be finished very soon. CSS3 is modularized precisely so we can move modules through to implementation faster rather than an entire spec.
W3C CSS 工作组甚至还没有完成 CSS 2.1，你们都知道，对吧？我们打算很快完成。CSS3 精确模块化，因此我们可以更快地将模块移动到实现，而不是整个规范。
Every browser company uses a different software cycle methodology, testing, and so on. So the process takes time.
每个浏览器公司都使用不同的软件周期方法、测试等。所以这个过程需要时间。
I'm sure many, many readers well know that if you're using anything in CSS3, you're doing what's called "progressive enhancement" - the browsers with the most support get the best experience. The other part of that is "graceful degradation" meaning the experience will be agreeable but perhaps not the best or most attractive until that browser has implemented the module, or parts of the module that are relevant to what you want to do.
我相信很多很多读者都知道，如果你在 CSS3 中使用任何东西，你就是在做所谓的“渐进式增强”——支持最多的浏览器会获得最好的体验。另一部分是“优雅降级”，这意味着体验将是令人愉快的，但在浏览器实现模块或模块中与您想要做的相关的部分之前，体验可能不是最好的或最具吸引力的。
This creates quite an odd situation that unfortunately front-end devs get extremely frustrated by: inconsistent timing on implementations. So it's a real challenge on either side - do you blame the browser companies, the W3C, or worse yet - yourself (goodness knows we can't know it all!) Do those of us who are working for a browser company and W3C group members blame ourselves? You?
这造成了一种非常奇怪的情况，不幸的是，前端开发人员会因以下情况而感到非常沮丧： 实现的时间不一致。所以这对任何一方都是一个真正的挑战——你是责怪浏览器公司、W3C，还是更糟——你自己（天知道我们不可能知道这一切！）做我们这些为浏览器公司和 W3C 小组工作的人成员自责？你？
Of course not. It's always a game of balance, and as of yet, we've not as an industry figured out where that point of balance really is. That's the joy of working in evolutionary technology :)
当然不是。这始终是一种平衡的游戏，到目前为止，作为一个行业，我们还没有弄清楚平衡点到底在哪里。这就是在进化技术中工作的乐趣:)
回答by Spudley
I understand that IE9 still won't be supporting CSS gradients. Which is a shame, because it's supporting loads of other great new stuff.
我知道 IE9 仍然不会支持 CSS 渐变。这是一种耻辱，因为它支持大量其他很棒的新东西。
You might want to look into CSS3Pieas a way of getting all versions of IE to support various CSS3 features (including gradients, but also border-radius and box-shadow) with the minimum of fuss.
您可能希望将CSS3Pie视为一种让所有版本的 IE 以最小的麻烦来支持各种 CSS3 功能（包括渐变，但也包括边框半径和框阴影）的方法。
I believe CSS3Pie works with IE9 (I've tried it on the pre-release versions, but not yet on the current beta).
我相信 CSS3Pie 可以与 IE9 一起使用（我已经在预发布版本上尝试过，但还没有在当前的测试版上尝试过）。
回答by Paul D. Waite
Not sure about IE9, but Opera doesn't seem to have any gradient support yet:
不确定 IE9，但 Opera 似乎还没有任何渐变支持：
No occurrence of “gradient” on that page.
该页面上没有出现“渐变”。
There's a great article by Robert Nyman on getting CSS gradients working in all browsers that aren't Opera though:
Robert Nyman 有一篇很棒的文章，关于让 CSS 渐变在非 Opera 的所有浏览器中工作：
Not sure if that can be extended to use an image as a fallback.
不确定这是否可以扩展为使用图像作为后备。
回答by webinista
As of version 11, Opera supports linear gradients with the -o- vendor prefix. Chris Mills wrote a Dev.Opera article about it: http://dev.opera.com/articles/view/css3-linear-gradients/
从版本 11 开始，Opera 支持带有 -o- 供应商前缀的线性渐变。Chris Mills 写了一篇关于它的 Dev.Opera 文章：http://dev.opera.com/articles/view/css3-linear-gradients/
Radial gradients are still in the works (both in the spec, and within Opera).
径向渐变仍在开发中（在规范和 Opera 中）。
回答by Jules
Use an Gradient Generator - and everything will be perfect ;) http://www.colorzilla.com/gradient-editor/
使用渐变生成器 - 一切都会很完美;) http://www.colorzilla.com/gradient-editor/
