解决IE6的PNG透明JS插件使用介绍

IE6的PNG透明是个老问题了，最近有朋友问我有没有最好的解决这个问题的插件。虽然知道且在用DD_belatedPNG这个插件，今天抽空把这个发上来。

虽然之前在博客里发过一款jquery的png插件，但是不支持背景平铺。
DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性，支持伪类。是一款不错的值得推荐的插件，用法也比较简单。

使用方法：


代码如下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

引用函数是DD_belatedPNG.fix()，括号里的 .png_bg 改成你的css选择器名称。
ID选择器例子：


代码如下:

DD_belatedPNG.fix('#png');

伪类例子：


代码如下:

DD_belatedPNG.fix('.png a:hover,.png a:focus');

img标签例子：


代码如下:

DD_belatedPNG.fix('img');

如果是多个直接加逗号（英文下的）就行。例如：


代码如下:

DD_belatedPNG.fix('.png_bg,#png,.png a:hover,.png a:focus,img');

使用方法：


代码如下:

<!--[if IE 6]>
<script type="text/javascript" src="js/dd_png.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.tel,.head_content');
</script>
<![endif]-->

括号里的是样式选择器，中间用逗号隔开
JS文件下载地址：
0.0.8a-min.js (压缩版)

赞 (0)

相关推荐

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

    我们时常在使用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

  • nodejs修复ipa处理过的png图片

    最近做项目遇到一个需求:解析apk和ipa包,然后把里面的icon上传到服务器. 问题 解析上传过程比较简单,我使用JSZip对apk和ipa进行解压,然后把找到里面的icon上传到服务器.但是,当我在网页中使用图片时,问题出现了.对于apk中的icon,没有任何问题,但是对于ipa中解析出来的图片,在safari中可以正常显示,在其他任何浏览器去无法显示. 原因 Google后发现,是苹果对png图片进行了优化处理,具体看这篇文章(查看),在文章中我们可以了解到一些有用信息: Apple us

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

    复制代码 代码如下: <!DOCTYPE html><html lang="en"><head><title>解决ie6下png透明方法之JS法-</title><style type="text/css"> .a{background: #FFFF99 ;  background-image: url(bg.jpg); height:800px;padding: 50px;  } .b{ fl

  • PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）

    PNG.JS代码: // PNGHandler: Object-Oriented Javascript-based PNG wrapper // -------------------------------------------------------- // Version 1.1.20031218 // Code by Scott Schiller - www.schillmania.com // ---------------------------------------------

  • ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整

    本文实例讲述了ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整的方法.分享给大家供大家参考.具体实现方法如下: TP自带有图片类,有给图片加水印的功能. 这里完善了: 1. png水印透明 2. 加水印后质量调整(只限于JPG格式) 代码如下: 复制代码 代码如下: /** +-------------------- * 为图片添加水印 +-------------------- * @static public +-------------------- * @par

  • 解决IE6的PNG透明JS插件使用介绍

    IE6的PNG透明是个老问题了,最近有朋友问我有没有最好的解决这个问题的插件.虽然知道且在用DD_belatedPNG这个插件,今天抽空把这个发上来. 虽然之前在博客里发过一款jquery的png插件,但是不支持背景平铺. DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性,支持伪类.是一款不错的值得推荐的插件,用法也比较简单. 使用方法: 复制代码 代码如下: <

  • png在IE6 下无法透明的解决方法汇总

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 复制代码 代码如下: style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')" 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSi

  • js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法

    本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": <div id="divContainer"> <a name="link"> -->报错处 第三方插件内容- </a> </div> 原因: 所设置

  • 利用JS解决ie6不支持max-width,max-height问题的方法

    今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 复制代码 代码如下: if($.browser.msie && $.browser.version == 6.0)  {    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));    $('.viewBigPic img').each(function(){

  • jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法

    jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求 } 我们的页面会死在这里,贴上F12开发者工具返回的结果: 此时,我们并没有处理错误的回调函数,而百度出来的例子中也只有这两个回调函数: beforeSubmit: s

  • DD_belatedPNG,IE6下PNG透明解决方案(国外)

    我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件

  • jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题

    JSON 对象是在 ECMAScript 第 5 版中实现的,此版于 2009 年 12 月发布:IE6 IE7 与 IE8(Q) (IE8(Q) 相当于 IE 5.5) 发布时间比较早,没有在其 Javascript 引擎中实现该对象. 好在我们可以使用 json2.js 作为兼容. 地址:https://github.com/douglascrockford/JSON-js 这个JS中的函数将JSON对象转换成JSON字符串,解决 IE6.7.8不能使用 JSON.stringify 函数的

  • javascript解决IE6下hover问题的方法

    有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下 <!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/1999

  • 通过继承IHttpHandle实现JS插件的组织与管理

    通过继承IHttpHandle实现JS插件的组织与管理

    如: 复制代码 代码如下: <!- Js插件 --> <script type="text/javascript" src="/scripts/popup.js"></script> <script type="text/javascript" src="/scripts/popup-util.js"></script> <!-Jquery插件 --> &

随机推荐