• [原]背景半透明效果

    2007-08-08 | Tag:CSS 原创

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://forest.blogbus.com/logs/7522255.html

    做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法:

    ================HTML======================
    <div class="alpha1">
      <div class="ap2">
          <p>背景为红色(#FF0000),透明度20%。</p>
      </div>
    </div>
    ==========================================
    ==================CSS======================
    .alpha1{
        width:300px;
        height:200px;
        background-color:#FF0000;
        filter: Alpha(Opacity=30);
    }
    .ap2{
        position:relative;
    }
    ==========================================

    样就可以实现啦,也不用担心定位和自适应问题,最大的问题就是IEonly。
    如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。改下页面结构:

    =================HTML======================
    <div class="alpha1">
      <div class="ap2">
          <p>背景为红色(#FF0000),透明度20%。</p>
      </div>
      <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
    </div>
    ==========================================

    当然样式也得做修改啦:

    ==================CSS======================
    .alpha1,.alpha2{
        width:100%;
        height:auto;
        min-height:250px;/* 必需 */
        _height:250px;/* 必需 */
        overflow:hidden;
        background-color:#FF0000;/* 背景色 */
    }
    .alpha1{
        filter:alpha(opacity=20); /* IE 透明度20% */
    }
    .alpha2{
        background-color:#FFFFFF;
        -moz-opacity:0.8; /* Moz + FF 透明度20%*/
        opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
    }
    .ap2{
        position:absolute;
    }
    ==========================================

    完整Demo


    收藏到:Del.icio.us




    引用地址:

    评论

  • 过客踩踩踩踩踩!!!!!!!!!!
  • 过客踩踩踩踩踩!!!!!!!!!!
  • 过客踩踩踩踩踩!!!!!!!!!!
  • 谢谢
  • 很好
  • 第二种方法好像IE下又不行了,有没有能兼容IE和FF的解决方法,谢谢!