linear-gradient(),是css3中新增的属性,但是在IE浏览器的10以下是不支持的,因此就需要一个替代实现方式;经过查找发现,可以通过私有滤镜来实现该效果。
filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)
sProperties: 设定一个或多个过滤属性的字符串;
-
常用属性
StartColorStr:设置渐变的初始值,其值已#AARRGGBB的格式表示; AA表示颜色透明度,其值是16进制的,从00到FF分别表示透明度为0到完全不透明;RRGGBB表示16进制的颜色;
其默认值为#FF0000FF;
例:StartColorStr = #00EEEEEE就表示透明度为零,颜色值为#eeeeee的值。EndColorStr:设置渐变的结束值,具体值同StartColorStr一样;
GradientType:设置颜色的渐变方向,其只有垂直和水平两个渐变方向,其中,垂直渐变用0表示;水行方向用1表示;其默认是垂直渐变;
例:GradientType = 1表示水平渐变Enabled:表示是否启用过滤器的值,默认为true;
-
具体用法
.m-tpl-like { background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000); background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000); background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000); filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#00000000, endColorstr=#ff000000, GradientType = 0); }
想要查看具体更多信息可以看微软的官方文档https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532997(v=vs.85)
网友评论