我知道Internet Explorer有一些专有扩展,因此您可以执行创建具有渐变背景的div的操作.我记不起元素名称或它的用法.有没有人有一些例子或链接？
我用于所有浏览器渐变的代码:
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;
}
看一下IE可以处理的自定义CSS过滤器 http://msdn.microsoft.com/en-us/library/ms532847.aspx
该filter样式适用于IE8和IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
在IE中渐变的一个重要问题是虽然你可以使用微软的过滤器......
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE'); zoom:1;
...它们会在渐变所覆盖的任何文本上删除清晰类型.鉴于渐变的目的通常是为了让UI看起来更好,这对我来说是个显示器.
因此,对于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%);
京公网安备 11010802040832号 | 京ICP备19059560号-6 