Internet Explorer 中的渐变颜色

Posted 2023-02-16

【中文标题】Internet Explorer 中的渐变颜色

【英文标题】：Gradient colors in Internet Explorer

【发布时间】：2010-09-17 20:15:33

【问题描述】：

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

【问题讨论】：

我相信你在找this specific CSS setting。

一点小提示：我在 IE9 上工作时发现了一个小错误。如果您不拼出整个 HEX 颜色，它将无法正常工作。即 #cccccc 不是 #ccc 希望这会有所帮助。

小心对表格行应用渐变。 IE 似乎以不同的方式处理这些问题，因此要使该问题的任何其他解决方案起作用，您需要将 tr 内容包装在 div 中并对其应用渐变。

除了@mdostudio，您甚至可以使用#FFFFFFFF（8 个字符），其中前两个定义透明度。全透明 (FF) 到纯色 (00)。

@user995849：这不是错误。 filter: progid:DXImageTransform.Microsoft.gradient-API 根本不接受速记 CSS 颜色值。我在这里写了一个完全引用的解释：Why are 3-digit hex color code values interpreted differently in Internet EXPLORER?。该 API 还有另一个“惊喜”：它的完整格式（包括 alpha）实际上是 aarrggbb 而不是 rrggbbaa

【参考方案1】：

在我的例子中，我将它插入到标题部分

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

然后在样式部分插入它

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;

【参考方案2】：

filter 样式应该适用于 IE8 和 IE9。

.gradientClass

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

【参考方案3】：

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

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 用户准备的 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;

【讨论】：

完美的渐变效果。 zoom:1 是回答这个问题的关键。

@Blowsie 当与边界半径结合使用时，我遇到了渐变问题。因为背景有效地消除了角落。显然取决于所选的颜色范围，背景会填充角落。 IE中处理边框半径和背景渐变有技巧吗？

@codepuppy 这是一个没有解决方案的已知错误，像 bootstrap 这样的大型框架选择了没有渐变的边界半径。

@codepuppy 显然有一种方法可以在 IE 中使用边框半径和渐变。 ***.com/a/7544248/1446845

【参考方案4】：

我在 IE 9 渐变中发现的两件事。

-ms-filter 对我不起作用。我不得不简单地使用filter。 我必须将height: 100% 添加到我的课程中，IE 才能使用渐变。

【讨论】：

您可能想查看CSS3Pie，这是一个用于 IE 的脚本，用于添加对包括渐变在内的某些 CSS 功能的支持。它也适用于 IE9。

【参考方案5】：

试试这个：

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

【参考方案6】：

来自 Microsoft 的出色工具，可让您实时检查颜色并为所有浏览器生成 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%);

【参考方案7】：

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

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

【参考方案8】：

当谈到 IE 中的渐变时，一个重要的问题是虽然您可以使用 Microsoft 的过滤器...

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

...他们在渐变覆盖的任何文本上kill clear type。考虑到渐变的目的通常是让 UI 看起来更好，这对我来说是个阻碍。

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

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

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

【参考方案9】：

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

展示了如何让渐变在所有浏览器中都能正常工作。

【参考方案10】：

来自 ScriptFX.com article：

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

【参考方案11】：

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