使用css让图片实现半途明

css代码:

<style type="text/css">

          .alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0,Style=1, StartX=0, StartY=0,
           FinishX=100, FinishY=100)}

</style>

完整div+css的html文件

<!DOCTYPE html>

      <html>

         <head>

            <meta charset="utf-8" />

            <title>DIVCSS5为大家演示的DIV+CSS让图片半透明效果</title>

            <style type="text/css">

            <!--

            /* www.divcss5.com */

            .alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)}

            -->

            </style>

         </head>

         <body>

            <div class="alpha"><img src="http://www.divcss5.com/img/1.gif" width="180" /><br />

            以上是CSS处理后效果<br />

            <br />

            </div>

            <div><img src="http://www.divcss5.com/img/1.gif" width="180" /><br />

            以上是处理前效果</div>

         </body>

   </html>

使用到的是CSS滤镜效果代码:

filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100) 更改里面的数字调节透明度和效果

注意的是在火狐或谷歌浏览器中这个CSS滤镜效果不能实现或不起作用,所以我们一般推荐不使用CSS滤镜,还有CSS滤镜会导致用户电脑内存的占用过多,网页浏览不畅,适可运用即可。

 

 

 

 

文章来源:https://www.shengli.me/css/8.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值