DIV+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滤镜会导致用户电脑内存的占用过多，网页浏览不畅，适可运用即可。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/wenji/w280.shtml
