Html Internet Explorer 中的渐变颜色

Gradient colors in Internet Explorer

提问by Jeremy

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?

我知道 Internet Explorer 有一些专有扩展，因此您可以执行诸如创建具有渐变背景的 div 之类的操作。我不记得元素名称或用法。有没有人有一些例子或链接？

采纳答案by Nick

Look at the custom CSS filters IE can handle http://msdn.microsoft.com/en-us/library/ms532847.aspx

查看 IE 可以处理的自定义 CSS 过滤器 http://msdn.microsoft.com/en-us/library/ms532847.aspx

回答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 James Lawruk

The filterstyle should work for IE8 and IE9.

该filter风格应适用于IE8和IE9。

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

回答by Jonathan Moffatt

A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...

当涉及到 IE 中的渐变时，一个重要的问题是，尽管您可以使用 Microsoft 的过滤器...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

...they kill clear typeon any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.

...它们会清除渐变覆盖的任何文本上的清晰类型。鉴于渐变的目的通常是让 UI 看起来更好，这对我来说是个障碍。

So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.

所以对于 IE，我使用重复的背景图像代替。如果背景图片 css 与其他浏览器的渐变 CSS 结合（根据 Blowsie 的回答），其他浏览器将忽略背景图片而支持渐变 css，因此它最终只会应用于 IE。

background-image: url('/Content/Images/button-gradient.png');

There are plenty of sites you can use to quickly generate a gradient background; I use this.

有很多网站可以用来快速生成渐变背景；我用这个。

回答by thezar

Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

来自微软的伟大工具，允许您实时检查颜色并为所有浏览器生成 CSS：http: //ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

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

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

回答by Sniffer

Just thought I'd add this useful link: http://css3please.com/

只是想我会添加这个有用的链接：http: //css3please.com/

Shows how to get gradients working in all browsers.

展示如何让渐变在所有浏览器中工作。

回答by TimKola

Note that IE10 will support gradients as follows:

请注意，IE10 将支持如下渐变：

background: -ms-linear-gradient(#017ac1, #00bcdf);

回答by vmarquez

Right from ScriptFX.com article:

直接来自 ScriptFX.com文章：

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>

回答by vmarquez

Try this:

尝试这个：

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

回答by Vincent

Two things I discovered while struggling with IE 9 gradient.

我在努力使用 IE 9 渐变时发现了两件事。

1. The -ms-filterdid not work for me. I had to use simply filter.
2. I had to add height: 100%to my class for IE to use the gradient.

1. 在-ms-filter没有为我工作。我不得不简单地使用filter.
2. 我必须添加height: 100%到我的类中，以便 IE 使用渐变。