ie6-ie8不支持opacity透明度的解决方法

直接看demo:

  • html部分
<p>绿色背景p>
<div class="box">文字部分div>
<p>绿色背景+60%透明度p>
<div class="box opacity">文字部分div>
  • css部分
.box{width:100px;height:100px;background:green;margin-bottom:50px;text-align:center;color:#fff;line-height:100px;}
.opacity{-khtml-opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:"alpha(opacity=60)";opacity:0.6;}
  • 效果图-在ie9/ie10/ff/chrome/opera/safari显示正常:

    ie6-ie8不支持opacity透明度的解决方法_第1张图片
    在ie8及以下opacity失效:
    ie6-ie8不支持opacity透明度的解决方法_第2张图片

  • 解决方法:
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);/兼容ie8及以下/

 .box{width:100px;height:100px;background:green;margin-bottom:50px;text-align:center;color:#fff;line-height:100px;}
.opacity{-khtml-opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:"alpha(opacity=60)";opacity:0.6; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);/*兼容ie8及以下*/}

ie8正常:
ie6-ie8不支持opacity透明度的解决方法_第3张图片

你可能感兴趣的:(CSS(3))