1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的【HTML】

利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的【HTML】

时间:2021-10-31 10:47:19

相关推荐

利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的【HTML】

web前端|html教程

利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

web前端-html教程

接下来介绍几种PNG图片在IE6中不透明的解决办法

传奇原生源码,只装Ubuntu怎么,爬虫有什么证书,php与php之间的相互交互,自助seo软文lzw

1、用自己的PNG,让IE6一边去吧

棋牌游戏源码免费下载,vscode上传gitee,在u盘上面安装ubuntu系统,速达tomcat配置,sqlite邻行取值,discuz必要插件,各前端框架的优缺点,爬虫晋江的原理分析,php抓取页面,seo 优化 代理,百度收录的网站结构,既可以制作网页又可以发布网站的软件,ecshop 仿阿里巴巴模板,手机视频电影网站程序lzw

首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义

在线管理签收数据源码,ubuntu命令连接无线,爬虫语法教程视频,php怎么调用php语言包,寿光seo外包lzw

.jpgtest{ background:url(mark.jpg); _background:url(mark.jpg);}

优点:方便、快捷,使用超简单

缺点:对于PNG图片只是某些局域透明,该方法比较奏效,但图片要是半透明的话,这种方法就实现不了

该方法延伸的另外一种解决办法:用PS或者其他图片编辑工具把png图片保存为8位格式的,这样IE6就支持透明了

2、CSS滤镜实现PNG图片半透明

.jpgwrap{ padding:80px; background:green;}.jpgtest{ width:165px; height:50px; overflow:hidden; text-indent:-9999em;background:url(/data/mark/mark.jpg) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/data/mark/mark.jpg 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任我行

从5.5版本开始,Internet Explorer(IE)开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。详细的htc文件介绍请稳步

下载IE6浏览器PNG图片透明HTC插件

复制iepngfix.htc和blank.jpg文件到你网站目录(复制 blank.jpg、iepngfix.htc、iepngfix_tilebg.js(该文件是支持position和repeat属性必不可少的)到放置到某个位置;)

定义将会使用PNG图片的标签上定义,如下css样式

img,div{behavior:url(iepngfix.htc);}

修改iepngfix.htc中IEPNGFix.blankImg = ‘images/blank.jpg’;路径为你的图片路径

让IE6浏览器加载JS文件

优点:配置好这个,那整个站点要使用就很方便了,一次配置,终身受用

缺点:配置相对方法,网站会多出三个文件,不支持元素hover等伪类,不能使用CSS Sprite技术,页面加载初期还是会看到png图片透明区域是灰色的

4、CSS版JS解决方法

该方法也需要一个透明的blank.jpg图片,第三方法压缩包中有,这里不单独提供了,定义Css样式

img{_azimuth:expression(this.jpgSet?this.jpgSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf(.jpg)>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\" + this.src + ", sizingMethod=image)",this.src = "blank.jpg"):(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.jpgSet=true);}

代码说明:this.src = “blank.jpg” 路径也是相对于页面文件的,而非CSS文件

优点:方法相对简单

缺点:需要添加一个透明图片blank.jpg,仅支持img标签即不支持元素设置的PNG背景图片,不支持元素hover等伪类,刚加载时也会出现灰色

5、原生态javascript解决办法

javascript解决IE6 PNG图片不透明的插件比较多,看个人喜好选择使用了

插件一:iepngfix

下载IE6浏览器PNG图片透明iepngfix插件

让IE6浏览器加载JS文件

插件二:DD_belatedPNG

该插件应该算是真正意义上的插件了,其使用方法很插件化

下载IE6浏览器PNG图片透明DD_belatedPNG插件

本博备份:DD_belatedPNG.js

使用方法:

DD_belatedPNG.fix(".jpgtest,#pngtest,.jpgtest img,.jpgtest:hover");

fix()参数传递要透明元素 或者子元素,该方法和jQuery选择$使用基本相同,只是多个元素间分隔用的是”,”而jQ用的是空格,为了更方便可以在文件结尾加上

w3cfuns的解决方法是,在每个用到png的标签都加上id或class,然后写成

window.onload = function(){ DD_belatedPNG.fix(".jpgFix,.jpgFix:hover");}

这样在页面中在需要透明的元素上加class=”pngFix xx bbb”,class中只要包含有pngFix就可以了

优点:支持img标签,CSS Sprite、背景、平铺、伪类,不需要配置啥,引入JS就可以使用,赞一个

缺点:加载初期PNG图片会出现灰色

插件三:EvPng

该插件使用方法包括优缺点都跟DD_belatedPNG相同,不再详述

下载IE6浏览器PNG图片透明EvPng插件

插件四:jQueryPngFix插件

下载IE6浏览器PNG图片透明jQueryPngFix插件

博客备份:JqueryPngFix

修改pngfix.js文件中blankgif: ‘images/blank.jpg’透明GIF图片路径为相对页面路径

让IE6浏览器加载JS文件

优点:支持img、css背景

缺点:需要jQuery库支持,不支持CSS Sprite、平铺、伪类,加载初期会出现灰色

有了这种方法htc的解决方案,显得多于了,不过这里介绍的htc解决IE6 PNG透明问题只是htc功能的冰山一角,htc在其他方面的应用远远比这强大的多

参考:

/forum.php?mod=viewthread&tid=297

/rock506/archive//11/30/1892067.html

IE6的PNG透明解决方案

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。