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

前台开发的朋友都知道png图片在要ie6是不通过js是无法实现图片透明的,这种问题在ie6以上的版本不是问题,下面来看解决办法。

原理
这个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不透明的方法。

分类:默认分类 时间:2012-01-04 人气:3
本文关键词:
分享到:

相关文章

  • IE6下PNG图像不透明二种解决方案 2012-09-23

    文章来介绍一下关于IE6下PNG图像不透明解决方法。 IE真的是一个蛋疼的东西,虽然很不想用IE的浏览器了,但很多时候,工作中还不得不对其进行兼容。其中PNG的半透明在IE6中就是一个很麻烦的需要兼容的事情。笔者收集和整理了以下的一些方法来进行处理PNG在IE6中的半透明。具体请往下看。 一、CSS 滤镜(两种方法)   一般能用CSS处理的就尽量不要用JS了,个中的原因,你懂的…… 本人整理了一下使用滤镜的方法处理IE6下的PNG半透明,但该方法也有局限性,不能使用背景定位,也就是不能使用CS

  • ie6不支持png透明简单的解决办法 2012-03-16

    <!--[if lt IE 7]> <script type="text/javascript" src="img/iepngfix_tilebg.js"></script> <style type="text/css"> img, div, input { behavior: url("img/iepngfix.htc") } </style> <![endif]-->   这里要注意的是必须把iepngfix_tileb

  • JS解决ie6下png透明的方法实例 2012-04-05

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

  • JS解决ie6下png透明方法 2013-02-01

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

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

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

  • ie6下的兼容性问题 2012-07-28

    (1)高度小于10px,在ie6下显示的实际高度可能变大.当设置一个div的高度小于10px,在ie6下显示的实际高度可能变大,解决方案有两个: 如图,在这个div的样式里加上_overflow:hidden;这个属性,下划线的意思是适配ie6。另一个是把这个属性换成_font-size:0;也可以; (2).ie6下外边距加倍:如margin-bottom:4px;解决方案:_margin-bottom:2px; (3).ie6下,a标签的的hover属性管用,其他标签的hover均失效,需要

  • 网站图片JPG.PNG.GIF哪个好,该选择谁 2015-01-28

      目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧)。虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题。如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。   PNG、GIF、JPG 介绍 GIF 图片   Gif 算是比较老的图片格式了,它的色彩效果最低,用gif保存鲜艳的图片的话会

  • 网站模板和美术和谐的四种方法 2013-04-04

      这是个人好习惯。清晰的层文件结构,大大的提升工作效率。最好取的层名字通俗易懂。不要出现“为标题”,“图层X”之类的。   精确的结构定位和文字样式   |---1.margin.padding统一大小   |---2.字体颜色大小统一   当你历尽千辛万苦完成效果图,不要忘了最后检查一下,网站模板的padding ,margin 是否统一。字体的颜色和大小是否也精确的呈现在效果图上呢?不要寄希望前端去做出判断,来来去去的沟通,如果出现相互抱怨就不好了。做一个细致的美术,做一个负责的美术,做一

  • Discuz! 替换模板默认Logo方法 2013-07-23

      很多新手站长,安装好Discuz!程序以后不知道怎么替换Discuz!程序默认的logo。后台安装好第三方作者的模版,却显示的是模版作者的logo。下面下砂教大家如何将默认logo替换为自己设计的logo。   一、查找Discuz!模板中logo的目录和logo图标格式   使用浏览器打开您的网站,鼠标放在logo上点击右键,点击属性,进入如下图所示的页面,可以看见logo存放在/static/image/common目录下,格式为PNG图片,名称为logo。如下图所示:   二、打开FT

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.100 (s). 10 q(s)