js DD_belatedPNG解决ie6下png图片不透明方法

 原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法
1.在这里下载DD_belatedPNG.js文件.

http://dillerdesign.com/experiment/DD_belatedPNG/#download

2.在网页中引用,如下:

 

 代码如下 复制代码

<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript">    
/* EXAMPLE */  
DD_belatedPNG.fix('.png_bg');  

/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/  

</script> <![endif]--> 

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

 代码如下 复制代码

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">  
DD_belatedPNG.fix('.trans,.box a:hover');   </script>
<![endif]--> 

我们只要在文件的开头加入上面这段代码

 代码如下 复制代码

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">  
DD_belatedPNG.fix('.trans,.box a:hover');   </script>
<![endif]-->

就可以方便的解决了ie6 png不透明的方法。

时间: 2025-01-21 09:45:06

js DD_belatedPNG解决ie6下png图片不透明方法的相关文章

用DD_belatedPNG解决IE6下PNG图片无法透明的问题

你了解png24吗? http://www.iyunlu.com/view/Front-end/60.html 对于png24的问题,之前用了pngFix,可以解决背景图片的问题.特别是对于标签,就没有什么效果. 用了DD_belatedPNG这款png处理插件. 优点 支持 backgrond-position 与 background-repeat,这是其他 js 插件不具备的. DD_belatedPNG 还支持 a:hover 伪类属性,以及 img 标签. 使用方便. 说明 如处理所有

解决ie6下png图片透明的完美方法

看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色.今天特下载网上一些优秀页面进行分析整合,整理了两套相当有效的解决方案,可以同时支持插入图片或css背景调用问题. 更新下载版本说明: 1."ie6-png-2(filter)"文件中,滤镜控制调用背景透明和js控制插入图片透明不能同时出现,这样在不同浏览器下会有问题,可以分开使用: 2."ie6-png-1(js)"

基于jQuery IE6下PNG图片背景透明问题解决方法

基于jQuery IE6下PNG图片背景透明问题解决方法 IE6问题真的很多,其中有一个问题是PNG图片背景无法变成透明,取而代之的是一个色块,有时候我们想用png透明图片来做小图标,这个在IE6下就纠结了,下面我们用一个jquery插件来解决这个问题,希望能帮上大家. 首先下载SuperSleight for jQuery,再下载一张透明gif图片transparent.gif. 引用脚本: <script type="text/网页特效" src="/scripts

css中解决ie6下背景图片底部不对齐错位办法

先来两段代码,一段是HTML代码,一段是CSS代码,下面的分析都是在这两段代码的基础上进行. HTML代码:  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1

解决IE6下不支持 png24的透明图片问题

常用的两种解决方案: 第一:使用IE滤镜解决 关键代码: css代码 _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.update8.com/Web/CSS/css/images/png24.png",sizingMethod="crop"); 有几点注意点: 1:这里对应的src地址一定是相对于html页面的不是相对于css路径的

ie6下png图片背景不透明的解决办法使用js实现_javascript技巧

我们时常在使用png图片的时候,在ie6下发生背景不透明的问题,下面给大家介绍下一个js解决的方式. 首先我们要用到一个js,代码如下: 复制代码 代码如下: /** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.diller

JS解决ie6下png透明方法

  解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK. <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css"> .a{background: #FFFF99 ; backgroun

基于Unit PNG Fix.js有时候在ie6下不正常的解决办法

网站页面使用unitpngfix.js可以在ie6下使png图片透明. 但是有时候会出现png背景不透明,显示为灰色的问题. 这是因为在页面加载unitpngfix.js后面有其他js.解决方法:将unitpngfix.js加载代码:<script type="text/javascript" src="js/unitpngfix.js"></script>移到页面最底部.

JS解决ie6下png透明的方法实例

解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK.   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css">  .a{background: #FFFF99