CSS滤镜实现半透明效果,兼容IE,火狐,谷歌浏览器

转自：http://www.dianyisheji.com/?helpview-104

在做一个项目的前端开发的时，遇到这样一个问题，有一块内容是半透明效果，同时底层的背景图片需要能够实现更换，如图：

 

首页，我们把上图切成下面这两张图片：

（图1）	（图2）

    

                                            

第二，为了方便图2层取准，将图1层设置相对定位，做为图2层的基准层，这样图2层依据left，right，top，bottom属性相对于图1层偏移位置

.c1{

       position:relative;                /*图片1作为基准层 相对定位*/

}

.c2{

       left:20px;

       top:20px;

}

<div class=”c1”><img src=”图片1.png”/><div class=”c2”></div></div>

 

第三，使用CSS滤镜实现半透明效果，CSS手册中其语法说明为filter:alpha(opacity=透明度)，opacity参数设置透明度，范围为0~100，0为完全透明。我们要做的效果透明度为70%，但测试发现在非IE内核浏览器均无法实现半透明效果。因为filter只有IE支持，所以要在CSS里添加opacity:0.7。

HTML:

.c2{

       position:absolute;              /*设置为绝对定位*/

       left:20px;                     /*以图1为基准左偏移

       top:20px;                     /*上偏移*/

       width:286px;                 

       height:213px;

       Opacity:0.7;                   /*设置透明度为70%，非IE浏览器用*/

    Filter:alpha(opacity=70);        /*IE浏览器用*/

       background:url(../images/图片2.png) no-repeat;     /*图片2作为浮动层背景*/

 

}

<div class=”c1”><img src=”图片1.png”/>

<div class=" c2 ">

    <ul>

        <li><a href="#">有些人会觉得乐活嘛不就是环保</a></li>

        <li><a href="#">环保选购重复使用多次利用</a></li>

        <li><a href="#">爱护地球，人人有责</a></li>

        <li><a href="#">不懂得爱自己，如何去爱别人</a></li>

    </ul>

</div>

</div>

第四，按照上面的做法会产生一个问题：文字也会随着变成半透明，因此将图2背景和文字分别存放两个DIV里，这样我们只对图2背景层设置透明度，文字不受影响

HTML：

<div class=" c1 ">

       <div class="c2"></div>

<ul>

        <li><a href="#">有些人会觉得乐活嘛不就是环保</a></li>

        <li><a href="#">环保选购重复使用多次利用</a></li>

        <li><a href="#">爱护地球，人人有责</a></li>

        <li><a href="#">不懂得爱自己，如何去爱别人</a></li>

     </ul>      

</div>