我知道Internet Explorer有一些专有扩展，使您可以执行诸如创建具有渐变背景的div等操作。我记不清元素名称或其用法。是否有人有一些示例或链接？
11个回答
83
我在所有浏览器中使用的渐变代码：
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;
为了在IE中实现此效果，您需要指定一个高度或使用zoom: 1来将hasLayout应用于该元素。
更新：
以下是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;
}
- Blowsie
4
3渐变色的完美代码片段。zoom:1是回答这个问题的关键。 - Voltin
2@Blowsie，我在使用边框半径时遇到了渐变问题。背景会有效地使角落变成正方形。显然，根据所选的颜色范围，背景会填充角落。在IE中处理边框半径和背景渐变有什么技巧吗？ - codepuppy
@codepuppy 这是一个已知的bug，目前还没有解决方案。像Bootstrap这样的大型框架已经选择使用无渐变的border-radius。 - Blowsie
1@codepuppy 显然有一种方法可以在IE中同时使用border-radius和gradients。https://dev59.com/E2025IYBdhLWcg3wPzbL#7544248 - Aurelio
11
filter 样式应该可以在 IE8 和 IE9 中正常工作。
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
- James Lawruk
7
在处理IE中的渐变效果时，需要注意的重要问题是，虽然可以使用Microsoft的filters（滤镜）...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...他们在任何被渐变覆盖的文本上都会破坏清晰度。鉴于渐变的目的通常是使用户界面看起来更好，这对我来说是一个停滞因素。
所以对于IE浏览器，我使用重复的背景图像代替。如果将背景图像CSS与其他浏览器的渐变CSS结合使用（如Blowsie的答案所示），其他浏览器将忽略背景图像而选择渐变CSS，因此它只会应用于IE浏览器。
background-image: url('/Content/Images/button-gradient.png');
有很多网站可以快速生成渐变背景；我使用这个。
- Jonathan Moffatt
6
来自微软的伟大工具，它可以实时检查颜色并为所有浏览器生成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%);
- thezar
3
请注意，IE10将支持以下渐变效果：
background: -ms-linear-gradient(#017ac1, #00bcdf);
- TimKola
2
以下是来自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>
- vmarquez
1
试试这个：
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
- user669677
0
在处理IE 9渐变时，我发现了两件事情。
-ms-filter对我不起作用。我必须使用简单的filter。- 我必须在我的类中添加
height: 100%才能让IE使用渐变。
- Vincent
1
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
filter: progid: DXImageTransform.Microsoft.gradient-API简单地不接受简写的 CSS 颜色值。我在这里写了一个完全参考的解释：为什么在 Internet Explorer 中 3 位十六进制颜色代码值被解释得不同？ 。该 API 还有另一个“惊喜”：它的完整格式（包括 alpha）实际上是aarrggbb而不是rrggbbaa。 - GitaarLAB