2.02日音讯,纯css彻底解决png的不透明

 　　2.02日音讯,纯css彻底解决png的不透明。png是一个透明的图片，这个常识只要学会设计的大家都知道，它和gif一样，都是可以制作透明图片的，只不过大家在用png透明的时候，会遇到不透明的问题，比如在ie6下，png的透明问题就会失效，当然以前我们也用过很多方法，比如使用gif、使用背景、使用js等方法也能解决，今天我们来学习一下纯css的解决之法，希望能给大家带来一些帮助，也希望大家能给首创网络进行交流：

　　用js感觉大材小用了，能用纯css解决就css吧，以下的两种方法都是尝试过可行的。

　　先将图片存为PNG-24透明格式。

　　(图片要绝对路径)

　　方法一：用png图作背景

　　要注意hack

　　html代码

　　logo

　　css代码

　　.logo{width:338px;height:57px;float:left;url(/images/logo.png)0px0pxno-repeat!important;text-indent:-1000px;_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.hdscwl.com/images/logo.png',senabled='true',sizingMethod='scale');}

　　标准：_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.hdscwl.com/templets/dyimgs/wymrs/images/logo.png',enabled='bEnabled',sizingMethod='image');

　　方法二：插入png图片，定义img

　　这个方法要准备一完全透明的图片transparent.gif，大小随意。

　　html代码

　　css代码

　　.logo{width:338px;height:57px;float:left;}

　　.logoimg{width:338px;height:57px;}

　　/*png透明兼容ie6*/

　　.logoimg{

　　azimuth:expression(

　　this.pngSet?this.pngSet=true:(this.nodeName=="IMG"&&"http://blog.51cto.com/viewpic.php?refimg="+this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage="none",

　　this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://qianduangcs.blog.51cto.com/2624849/"+"http://blog.51cto.com/viewpic.php?refimg="+this.src+"',sizingMethod='image')",

　　"http://blog.51cto.com/viewpic.php?refimg="+this.src="https://www.hdscwl.com/images/transparent.gif"):(this.origBg=this.origBg?this.origBg:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

　　this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://qianduangcs.blog.51cto.com/2624849/"+this.origBg+"',sizingMethod='crop')",

　　this.runtimeStyle.backgroundImage="none")),this.pngSet=true

　　);

　　}

　　有时候超链接加了这个透明滤镜，然后页面上所有超级连接全点不到了，解决办法是：

　　给a加上position:relative;

　　不过这里要提醒你，你这里的image路径是相对路径，那么值得注意的是，这个相对路径是根据html相对的，而不是CSS。