众所周知,透明格式的PNG24在IE6透明部分将会被灰色替代。
那么,到底有什么方法可以解决这个bug?

解决方法:
①用PNG8格式图片替代PNG24格式的图片
    用fireworks导出Alpha模式的PNG8格式的图片,Alpha模式的PNG8格式图片支持半透明,在IE6下全透明以及半透明部分会显示成全透明,并且会存在锯齿。如果对用户体验影响不是很大的话,可以考虑一下用这个方法。

②CSS滤镜
    在应用了透明PNG图片的选择器里面加上一下代码:
_background: transparent;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/nav.png', sizingMethod='scale');
这种方法的缺点:
(a)只能用于背景图片是透明的情况下,页面中的PNG透明图片无效;
(b)背景图片无法平铺,只能拉伸;
(c)导致该区域内的链接和按钮失效;
   解决方法:在该区域外部添加链接或者按钮,再用margin覆盖到该区域上面;也可以用position定位实现。

③jQuery PNG fix插件
    相对于前面的方法,jQuery的IE6下png透明插件相对要强大些。插件jquery.pngFix.js下载以及具体使用方法。
    由于地址上的是英文,在这里还是简单翻译一下吧。
在head内部添加:
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq库,请自行下载
<script type="text/javascript" src="jquery.pngFix.js"></script>//注意路径
<script type="text/javascript">
    $(document).ready(function(){
        $(document).pngFix();
    });
</script>
也可以针对特定的选择器:
<script type="text/javascript">
    $(document).ready(function(){
        $('.png').pngFix( );//.png改成使用了透明PNG图片的选择器
    });
</script>
<![endif]-->  
    缺点:不支持backgrond-position和background-repeat。

④DD_belatedPNG插件
    DD_belatedPNG支持backgrond-position和background-repeat,同时DD_belatedPNG还支持a:hover属性,以及<img>.
    这个插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的方法用的是AlphaImageLoader滤镜,插件DD_belatedPNG下载地址以及具体使用方法。
使用方法翻译:
<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png');// .png改成使用了透明PNG图片的选择器
</script>
<![endif]-->  
我没有实际用过这种方法,但是在写这篇文章做测试的时候初步感觉还是这个方法比较好。下次切图的时候会尝试一下用这种方法。

转载于:https://www.cnblogs.com/gumgum/archive/2011/09/15/2178008.html

让IE6支持图片半透明相关推荐

  1. html中支持透明图片的格式,IE6 png图片透明的解决方法教程

    IE6中支持PNG半透明图片完美解决方法-divcss5亲测 从IE7及IE7以上版本都支持PNG半透明格式图片,而唯独IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由此 ...

  2. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...

  3. IE6 PNG 图片问题分析

    背景:作为web前端的程序员都知道,许多需要使用png图片,但是目前仍然占据大部分市场的IE6却有着png图片背景不能透明的bug,下面分析一下: 目录: 一.可解决的方法 1. css滤镜 2. 老 ...

  4. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  5. css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例

    上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明 内容不透明 最常见的做法事设置元素的opacity,这种设置 ...

  6. jQuery 人脸识别插件,支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  7. 让您的电脑在任意目录可以支持图片的粘贴,试试看呗(第二篇)~

    继上一篇随笔 让您的电脑在任意目录可以支持图片的粘贴,试试看呗. http://www.cnblogs.com/guizhouhehai/p/4702294.html 首先要感谢,大家给出的建议与意见 ...

  8. [css] 如何让IE6支持min-width和max-width?

    [css] 如何让IE6支持min-width和max-width? 利用IE特有的css语法 .className {max-width:620px;min-width:1px;_width:exp ...

  9. 4 文件操作 支持图片 视频 mp3 文本等

    #文件操作:send_file,支持图片 视频 mp3 文本等@app.route("/img")def img(): return send_file("1.jpg&q ...

最新文章

  1. 视图——概述 || 创建或者修改视图 || 查看视图 || 删除视图
  2. add git 的文件 移除_【Git第八节】移除文件
  3. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 31: ordinal not in range(128)
  4. Win11系统使用DISM命令备份驱动程序的方法
  5. md5和sha256算法的区别,哪个比较安全
  6. php优缺点ppt,ppt和pdf有什么区别
  7. 每台计算机需要配置网关吗,怎么设置一台电脑作为网关
  8. python填充三角形颜色_python的pillow用ImageDraw.Draw.polygon如何填充半透明的颜色
  9. 《爱的五种能力》读后感
  10. r语言是高级编程语言_什么是R编程?
  11. mac 使用的小技巧
  12. [精华] nucleus实时操作系统MTK手机软件系统工程和配置简介
  13. pycharm配置python2.7.6环境_pycharm如何配置python环境
  14. 音频特效生成与算法 1
  15. Ubuntu 16.04中安装OpenCV 2.4.11
  16. backupPC安装与使用
  17. Eclipse的代码原封不动复制到word,WPS等文档中去
  18. 超级简单的3D slicer使用教程(一)
  19. 城市魅力排行榜丨这座城市竟然超越北上广!
  20. linux虚拟机流畅,启用3D加速让Ubuntu 20.04虚拟机更快更流畅

热门文章

  1. JVM 调优实战--什么是调优及如何调优的思路
  2. IDEA创建springboot项目:Unable to import maven project: See logs for details
  3. stream distinct去重_再来看看Java的新特性——Stream流
  4. C++11 auto和decltype关键字
  5. 通过 SSH 连接到 VMware NAT 模式下的 Ubuntu 虚拟机环境
  6. win10+anaconda3在 安装后‘conda‘ 不是内部或外部命令,也不是可运行的程序
  7. php laravel组件,php – 在Laravel中为共享组件包中的文件配置
  8. python正则表达式使用实例_正则表达式的基础知识,以及Python爬虫中的使用方法...
  9. java map按照value排序_基础:Java集合需要注意的 5 个问题
  10. stm32CAN波特率计算小程序(QT源码)