透明PNG背景图片 For IE 6.0 Firefox Opera

日期：2013-12-16  来源：攀枝花惠康网络公司

PNG图片在网页设计中饰演着一个很主要的脚色，操作PNG图片的特点可以建造出适用,灿艳的效不美观，可是对于PNG图片的撑持却不是很理想，Firefox和Opera对PNG撑持的斗劲好，出格是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

IE5.5+的AlphaImageLoader滤镜为通向png供给了一个道路，如不美观他载入的是PNG(Portable Network Graphics)名目，则0%-100%的透明度也被供给。我们就操作这个滤镜和hack来设计一个半透明png布景图片的模子

(X)HTML:

123456 <div id="wrap"><p><a href="http://www.jluvip.com"><strong>PNG半透明布景图片效不美观</strong></a><br />：PNG图片在网页设计中饰演着一个很主要的脚色，操作PNG图片的特点可以建造出需要使用灿艳的效不美观，可是对于PNG图片的撑持却不是很理想，Firefox和Opera对PNG撑持的斗劲好，出格是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。</p><p>IE5.5+的AlphaImageLoader滤镜为通向png供给了一个道路，如不美观他载入的是PNG(Portable Network Graphics)名目，则0%-100%的透明度也被供给。我们就操作这个滤镜和hack来设计一个半透明png布景图片的模子</p><p><a class="test"">/a></p></div>

效不美观预览

经测试，兼容IE6.0 Firefox 1.5 Opera 8.5，因为AlphaImageLoader滤镜不撑持IE5.0，所以IE5.0没有达到想要的效不美观，根基IE5.0与PNG无缘了。
关于AlphaImageLoader滤镜

语法：

Quotes From CSS2.0手册

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=http://www.css88.com/archives/sURL )
属性：

CSS:

12345678910 #wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}/*not for ie 6.0*/html>body #wrap{background: url(img/bgcanvas.png) repeat;}/*for ie 6.0*/* html #wrap {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");background:none;}#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失踪效的问题*/#wrap a:hover{ text-decoration:underline;}
　　　　　　true :

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。