让IE6支持图片半透明
众所周知,透明格式的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支持图片半透明相关推荐
- html中支持透明图片的格式,IE6 png图片透明的解决方法教程
IE6中支持PNG半透明图片完美解决方法-divcss5亲测 从IE7及IE7以上版本都支持PNG半透明格式图片,而唯独IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由此 ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
- IE6 PNG 图片问题分析
背景:作为web前端的程序员都知道,许多需要使用png图片,但是目前仍然占据大部分市场的IE6却有着png图片背景不能透明的bug,下面分析一下: 目录: 一.可解决的方法 1. css滤镜 2. 老 ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明 内容不透明 最常见的做法事设置元素的opacity,这种设置 ...
- jQuery 人脸识别插件,支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- 让您的电脑在任意目录可以支持图片的粘贴,试试看呗(第二篇)~
继上一篇随笔 让您的电脑在任意目录可以支持图片的粘贴,试试看呗. http://www.cnblogs.com/guizhouhehai/p/4702294.html 首先要感谢,大家给出的建议与意见 ...
- [css] 如何让IE6支持min-width和max-width?
[css] 如何让IE6支持min-width和max-width? 利用IE特有的css语法 .className {max-width:620px;min-width:1px;_width:exp ...
- 4 文件操作 支持图片 视频 mp3 文本等
#文件操作:send_file,支持图片 视频 mp3 文本等@app.route("/img")def img(): return send_file("1.jpg&q ...
最新文章
- 视图——概述 || 创建或者修改视图 || 查看视图 || 删除视图
- add git 的文件 移除_【Git第八节】移除文件
- UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 31: ordinal not in range(128)
- Win11系统使用DISM命令备份驱动程序的方法
- md5和sha256算法的区别,哪个比较安全
- php优缺点ppt,ppt和pdf有什么区别
- 每台计算机需要配置网关吗,怎么设置一台电脑作为网关
- python填充三角形颜色_python的pillow用ImageDraw.Draw.polygon如何填充半透明的颜色
- 《爱的五种能力》读后感
- r语言是高级编程语言_什么是R编程?
- mac 使用的小技巧
- [精华] nucleus实时操作系统MTK手机软件系统工程和配置简介
- pycharm配置python2.7.6环境_pycharm如何配置python环境
- 音频特效生成与算法 1
- Ubuntu 16.04中安装OpenCV 2.4.11
- backupPC安装与使用
- Eclipse的代码原封不动复制到word,WPS等文档中去
- 超级简单的3D slicer使用教程(一)
- 城市魅力排行榜丨这座城市竟然超越北上广!
- linux虚拟机流畅,启用3D加速让Ubuntu 20.04虚拟机更快更流畅
热门文章
- JVM 调优实战--什么是调优及如何调优的思路
- IDEA创建springboot项目:Unable to import maven project: See logs for details
- stream distinct去重_再来看看Java的新特性——Stream流
- C++11 auto和decltype关键字
- 通过 SSH 连接到 VMware NAT 模式下的 Ubuntu 虚拟机环境
- win10+anaconda3在 安装后‘conda‘ 不是内部或外部命令,也不是可运行的程序
- php laravel组件,php – 在Laravel中为共享组件包中的文件配置
- python正则表达式使用实例_正则表达式的基础知识,以及Python爬虫中的使用方法...
- java map按照value排序_基础:Java集合需要注意的 5 个问题
- stm32CAN波特率计算小程序(QT源码)