2.02日音讯,纯css彻底解决png的不透明。png是一个透明的图片,这个常识只要学会设计的大家都知道,它和gif一样,都是可以制作透明图片的,只不过大家在用png透明的时候,会遇到不透明的问题,比如在ie6下,png的透明问题就会失效,当然以前我们也用过很多方法,比如使用gif、使用背景、使用js等方法也能解决,今天我们来学习一下纯css的解决之法,希望能给大家带来一些帮助,也希望大家能给首创网络进行交流:
用js感觉大材小用了,能用纯css解决就css吧,以下的两种方法都是尝试过可行的。
先将图片存为PNG-24透明格式。
(图片要绝对路径)
方法一:用png图作背景
要注意hack
html代码
<divclass="logo"><ahref="/">logo</a></div>
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='/images/logo.png',senabled='true',sizingMethod='scale');}
标准:_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/templets/dyimgs/wymrs/images/logo.png',enabled='bEnabled',sizingMethod='image');
方法二:插入png图片,定义img
这个方法要准备一完全透明的图片transparent.gif,大小随意。
html代码
<divclass="logo"><ahref="/"><imgsrc="/images/logo.png"alt="logo"/></a></div>
css代码
.logo{width:338px;height:57px;float:left;}
.logoimg{width:338px;height:57px;}
/*png透明兼容ie6*/
有时候超链接加了这个透明滤镜,然后页面上所有超级连接<ahref=""></a>全点不到了,解决办法是:
给a加上position:relative;
不过这里要提醒你,你这里的image路径是相对路径,那么值得注意的是,这个相对路径是根据html相对的,而不是CSS。