Internet Explorer中的渐变颜色
我知道Internet Explorer有一些专有的扩展，所以你可以做一些事情，比如创build带有渐变背景的div。 我不记得元素名称或它的用法。 有没有人有一些例子或链接？
看看IE可以处理的自定义CSSfilterhttp://msdn.microsoft.com/en-us/library/ms532847.aspx
我用于所有浏览器渐变的代码：
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; }
filter样式应该适用于IE8和IE9。
.gradientClass { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); }
当涉及到IE中的渐变时，一个重要的问题是，虽然你可以使用微软的filter…
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE'); zoom:1;
…他们杀死任何梯度覆盖的文字清晰的types 。 鉴于渐变的目的通常是为了让用户界面看起来更好，这对我来说是一个阻碍。
所以对于IE我使用重复的背景图像。 如果背景图像的CSS与其他浏览器的渐变CSS（按照Blowsie的答案）相结合，其他浏览器将忽略背景图像，而倾向于渐变的CSS，所以它只会最终应用于IE。
background-image: url('/Content/Images/button-gradient.png');
有很多网站可以用来快速生成渐变背景; 我用这个
来自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%);
只是想我会添加这个有用的链接： http : //css3please.com/
演示如何使梯度在所有浏览器中运行。
请注意，IE10将支持渐变如下：
background: -ms-linear-gradient(#017ac1, #00bcdf);
从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>
尝试这个：
.red { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */ height: 0; /* gain layout IE5+ */ zoom: 1; /* gain layout IE7+ */ }
我在IE 9渐变的时候发现了两件事情。
-
-ms-filter没有为我工作。 我不得不使用简单的filter。 - 我必须添加
height: 100%我的课为IE使用渐变。
