现在解决IE6下png图片的透明问题。
首先,说明下,IE6不是不支持png透明,IE6可以支持8位的png透明图片,只是不支持24位的png透明。
如果一般是小图片的话,存储成8位的png图片就可以用。具体步骤如下:
图片切好后,记得一定要背景透明,然后“文件”、“存储为web所用格式”,然后在右边的下拉框中选择“png-8位”,然后一步步确定就可以了。
小图片也可以用gif图片,不过有些图片会产生锯齿。具体用哪个要看情况而定!
下面步入正题:
1.png图片的透明。
这种图片是以img的形式插入到网页中的。要解决这类图片的透明问题,只需要给这个图片一个class=“png”类,具体应用如下:
html代码:
<img src="" class="png" />
css代码如下:
img.png {background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "images/1.gif")}
注意这里的1.gif图片是一个新的引入的图片。放入到相应的文件夹里即可。文章的下面的压缩包就是1.gif的图片。
2.png背景图片的透明
这类图片的应用格式如下:
html代码:
要给.content这个div一个透明png的背景:
<div class="content"></div>
css样式如下:
background:url(images/touming.png);_background-image:url(yuanjianhang.iteye.com);background: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/touming.png',sizingMethod='scale');
上面这段代码中蓝色的代码是可以改变的,但是相关的属性千万不能删,比方说,你可以去掉yuanjianhang.iteye.com,但是绝对不能把_background-image:给去掉。
这里说明下,用png背景图片,不可以进行相关的定位,只能是默认的:background:url() left top;
还有一个重要的问题,用了这段样式,很可能.content里面的超链接等内容不可以点击,解决这个问题,你可以在div.content里面在套一个div,比方这个div的样式名字为:div.con,然后给.con一个样式:
div.con {position:relative}就可以解决所有的问题了。
这个下面的压缩包是上面提到的1.gif图片:
分享到:
相关推荐
DD_belatedPNG完美地解决了“iepngfix.htc”会出现的无法平铺,没法定位以及所加超链接的点击区域无法使用等问题!
调用方法: <!--[if lt IE 7]> // less than ie 7 <script type="text/javascript" src="image/ie_png.js"> ie_png.fix('.png, .menu ul li a span'); // 第二个参数为含有png的标签id(css) ie_png.fix('.png...
看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色。特对一些优秀页面进行分析整合,整理了两套相当有效的解决方案,...
今天解决png图片在IE6下的背景透明问题,找到了一个好方法。之前的解决方案会造成错位,使页面变形。现把这个方法公布如下,本人亲测可以正常使用,如果你在使用中出现问题,请看实例中的说明(英文不精的童鞋可以用...
IE6中 PNG 背景透明的最佳解决方案 兼容IE6和Firefox的PNG背景透明CSS代码 IE6下png背景不透明问题的综合拓展
2,js-png通过js文件(unitpngfix)实现了透明,但是ie6下bottom属性失效 3,demo-htc通过iepngfix.htc文件实现透明度,同时通过修改html结构得到想要的结果,但存在文档内容顺序的问题。 4,最后,demo-DD,此方法...
IE6下PNG背景透明的方法.rar
内含插件及使用说明 ie(IE)png半透明插件使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。
PNG图片在FF下是透明,但IE6下北京会变成蓝色的,有效解决PNG图片在IE6下背景不透明的问题
实现ie6的png图片透明的2种方法: 一种对于img标签,一种对于css
4 如果想使用背景平铺和定位的效果,以前的步骤做完之后,我们还要再引用 iepngfix_tilebg.js 这个js,才能使png图片在ie6中平铺时实现透明效果,像下面这样: <script type="text/javascript" src="iepngfix_...
看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色。今天特下载网上一些优秀页面进行分析整合,整理了两套相当有效的...
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e-xpression, 再到javascript透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我...
解决方法: ①用PNG8格式图片替代PNG24格式的图片 用fireworks导出Alpha模式的PNG8格式的图片,Alpha模式的PNG8格式图片支持半透明,在IE6下全透明以及半透明部分会显示成全透明,并且会存在锯齿。如果对用户体验...
最好的IE6下png透明图片修复代码,支持IE6下,透明png图片的平铺等css控制。内含源码及使用实例。
IE6中支持PNG半透明图片完美解决方法-divcss5亲测
cssPNG在IE6浏览器下不透明的解决方法。用JS+CSS吕镜写的
所以只好切Png32,大家都知道,png32苦逼的在ie6下有bug,试了搜狗 兼容,360各种ie内核,都有背景色。遇到这个问题,传统的解决方法都是写js,我查了一下,有一种很好的ie6的hack写法,不用js。简单说就是 用...
譬如前面我提到过用pngfix的那个方法就是调用外部JavaScript来解决在IE5、IE6下png透明问题。当然还有更多的方法。 而现在有种更加完美的方法能兼容IE5、IE6、IE7的CSS选择器解析不一样问题。那就是: ie7 - js 本...