利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法
1、用自己的PNG,让IE6一边去吧
首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义
.pngtest{ background:url(mark.png); _background:url(mark.gif);}
优点:方便、快捷,使用超简单
缺点:对于PNG图片只是某些局域透明,该方法比较奏效,但图片要是半透明的话,这种方法就实现不了
该方法延伸的另外一种解决办法:用PS或者其他图片编辑工具把png图片保存为8位格式的,这样IE6就支持透明了
2、CSS滤镜实现PNG图片半透明
.pngwrap{ padding:80px; background:green;}
.pngtest{ width:165px; height:50px; overflow:hidden; text-indent:-9999em;
background:url(http://www.qmtx3.com/data/mark/mark.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.qmtx3.com/data/mark/mark.png' sizingMethod='scale' enabled=true);
}
测试IE6利用CSS滤镜解决PNG图片透明问题
代码说明:_前缀的css属性只有IE6能识别,至于为什么要加上_background:none;,原因是前面定义的background图片的层深(可以理解为属性的z-index),比filter的要高,就会把filter定义的图片挡住,所以这里要让IE6的背景为none,PS:filter中的图片路径可以为远程图片路径,也可以是相对路径,如果使用相对路径,那应该是相对于页面的路径而非CSS
优点:不需要JS补丁,图片维护成本低,因为就一张png图片
缺点:filter定义的图片不支持 background-position:;(定位) background-repeat:;(平铺)属性,所以不能使用CSS Sprite技术,且该方法不能应用于img标签上,当应用于链接a标签上时有时会导致链接无法点击的情况,此时需要定义该a标签position:relative
3、HTC插件PNG图片IE6任我行
<q>从5.5版本开始,Internet Explorer(IE)开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。</q>详细的htc文件介绍请稳步
复制iepngfix.htc和blank.gif文件到你网站目录(复制 blank.gif、iepngfix.htc、iepngfix_tilebg.js(该文件是支持position和repeat属性必不可少的)到放置到某个位置;)
定义将会使用PNG图片的标签上定义,如下css样式
img,div{behavior:url(iepngfix.htc);}
修改iepngfix.htc中IEPNGFix.blankImg = 'images/blank.gif';路径为你的图片路径
让IE6浏览器加载JS文件
<!--[if IE 6]><script type="text/javascript" src="../js/iepngfix_tilebg.js"></script><![endif]-->
优点:配置好这个,那整个站点要使用就很方便了,一次配置,终身受用
缺点:配置相对方法,网站会多出三个文件,不支持元素hover等伪类,不能使用CSS Sprite技术,页面加载初期还是会看到png图片透明区域是灰色的
4、CSS版JS解决方法
该方法也需要一个透明的blank.gif图片,第三方法压缩包中有,这里不单独提供了,定义Css样式
img{_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);}
代码说明:this.src = "blank.gif" 路径也是相对于页面文件的,而非CSS文件
优点:方法相对简单
缺点:需要添加一个透明图片blank.gif,仅支持img标签即不支持元素设置的PNG背景图片,不支持元素hover等伪类,刚加载时也会出现灰色
5、原生态javascript解决办法
javascript解决IE6 PNG图片不透明的插件比较多,看个人喜好选择使用了
插件一:iepngfix
让IE6浏览器加载JS文件
<!--[if IE 6]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]-->
插件二:DD_belatedPNG
该插件应该算是真正意义上的插件了,其使用方法很插件化
下载IE6浏览器PNG图片透明DD_belatedPNG插件
本博备份:DD_belatedPNG.js
<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->
使用方法:
DD_belatedPNG.fix(".pngtest,#pngtest,.pngtest img,.pngtest:hover");
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script language="javascript" type="text/javascript">
window.onload = function(){
DD_belatedPNG.fix("*");
}
</script>
<![endif]-->
fix()参数传递要透明元素 或者子元素,该方法和jQuery选择$使用基本相同,只是多个元素间分隔用的是","而jQ用的是空格,为了更方便可以在文件结尾加上
w3cfuns的解决方法是,在每个用到png的标签都加上id或class,然后写成
window.onload = function()
{
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
这样在页面中在需要透明的元素上加class="pngFix xx bbb",class中只要包含有pngFix就可以了
优点:支持img标签,CSS Sprite、背景、平铺、伪类,不需要配置啥,引入JS就可以使用,赞一个
缺点:加载初期PNG图片会出现灰色
插件三:EvPng
该插件使用方法包括优缺点都跟DD_belatedPNG相同,不再详述
<!--[if IE 6]>
<script type="text/javascript" src="js/EvPng.js"></script>
<script language="javascript" type="text/javascript">
window.onload = function(){
EvPNG.fix("*");
}
</script>
<![endif]-->
插件四:jQueryPngFix插件
博客备份:JqueryPngFix
修改pngfix.js文件中blankgif: 'images/blank.gif'透明GIF图片路径为相对页面路径
让IE6浏览器加载JS文件
<!--[if IE 6]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->
优点:支持img、css背景
缺点:需要jQuery库支持,不支持CSS Sprite、平铺、伪类,加载初期会出现灰色
有了这种方法htc的解决方案,显得多于了,不过这里介绍的htc解决IE6 PNG透明问题只是htc功能的冰山一角,htc在其他方面的应用远远比这强大的多
参考:
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=297
http://www.cnblogs.com/rock506/archive/2010/11/30/1892067.html
http://www.xuanfengge.com/ie6-png-transparency-solution.html
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的的更多相关文章
- 解决ie6中png图片格式不兼容问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
- 解决IE6中 PNG图片透明的终极方案-八种方案!
“珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果, ...
- 利用js和CSS实现网页局部打印
1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- 利用js将 json对象在textarea中赋值与展示
明明很简单的东西,可惜网上一大堆废话.在此记录,转需. jsonStr = JSON.stringify(jsondata,); example: <!doctype html> < ...
- 利用js、css、html固定table的列头不动
1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } &l ...
- 利用js对象的特性,去掉数组中的重复项
- 利用 ffmpeg 的 maskedmerge 滤镜, 从视频中提取移动对象
ffmpeg \ -i background.png \ -i video.mkv \ -filter_complex \ " color=#00ff00:size=1280x720 [ma ...
- IE6中PNG图片背景无法透明显示的最佳解决方案
我想,对于像我这样的年轻的程序员来说,做网页开发时用chrome.firefox或者ie10什么的大约是被宠坏了.所以当最近做的项目不得不在恐龙化石般的ie6上运行时,ie6种种诡异的行径简直让我发指 ...
随机推荐
- lintcode - 恢复ip地址
class Solution { public: /* * @param s: the IP string * @return: All possible valid IP addresses */ ...
- vue.js请求数据(axios)
使用npm安装axios npm install axios --save 在main.js中引入axios import axios from "axios"; 注册axios到 ...
- layim和Gatewayworker组合的实时通讯
今天是第二次重新开发使用layim和Gatewayworker,但是由于第一次没有写文档,导致这一次就跟第一次一样,一头雾水,重新开始看文档研究,导致遇到一个瓶颈,怎么都过不去.所以,以这篇文章开始, ...
- Checkstyle的配置详解
Checkstyle是一款检查java程序代码样式的工具,可以有效的帮助我们检视代码以便更好的遵循代码编写标准,特别适用于小组开发时彼此间的样式规范和统一.Checkstyle提供了高可配置性,以便适 ...
- centos7安装hadoop
本次安装 hadoop版本为2.7.4,单节点安装.注意,在安装hadoop前要先安装jdk并配置好环境变量. 1. 上传hadoop压缩包文件到服务器上去(主机名centos1,ip 192.168 ...
- MapReduce的主要的六个类讲解
a.InputFormat类.该类的作用是将输入的文件和数据分割成许多小的split文件, 并将split的每个行通过LineRecorderReader解析成<Key,Value>,通过 ...
- maya2018无法安装卸载激活失败
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- 3DSMAX 安装失败
AUTO Uninstaller 更新下载地址 1.选择3DSMAX 2.选择3DSMAX的版本 3.点击“开始卸载”,然后重新安装就可以了
- Unity [SerializeField]
在Unity3d中Unity3D 中提供了非常方便的功能可以帮助用户将 成员变量 在Inspector中显示,并且定义Serialize关系. 也就是说凡是显示在Inspector 中的属性都同时具有 ...
- LeetCode 704.二分查找(C++)
给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1. 示例 1: 输入: num ...