IE各个版本下的透明兼容性写法

最新推荐文章于 2024-06-12 23:26:22 发布

JachinZhou

最新推荐文章于 2024-06-12 23:26:22 发布

阅读量2.3k

点赞数 1

分类专栏： css 文章标签： ie兼容背景透明兼容低版本ie

本文链接：https://blog.youkuaiyun.com/qq_35129893/article/details/80729633

版权

css 专栏收录该内容

4 篇文章

订阅专栏

做个笔记：

.transparent {
    /* Required for IE 5, 6, 7 */

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:alpha(opacity=50 finishopacity=0 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=white,endcolorstr=white);

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50 finishopacity=0 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=white,endcolorstr=white);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;

    /* ...or something to trigger hasLayout, like zoom: 1; */
    zoom: 1; 
}

Alpha 滤镜参数详解

参数名说明取值说明

Opacity 不透明的程度，百分比。从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。从0到100，0表是完全透明，100表示完全不透明。
Style 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
StartX 渐进开始的 X 坐标值
StartY 渐进开始的 Y 坐标值
FinishX 渐进结束的 X 坐标值
FinishY 渐进结束的 Y 坐标值

参考1:https://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8
参考2:https://blog.youkuaiyun.com/freshlover/article/details/17143341