IE6兼容透明背景图片及解决方案


Posted in Javascript onAugust 19, 2015

首先给大家展示效果图:

IE6兼容透明背景图片及解决方案

JS代码: 

<!--[if IE 6]>
<script src="~/Scripts/UI/DD_belatedPNG.js"></script>
<script>
$(function () {

//1、通过公共类

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

//2、直接用选择器:类名,ID,标签

DD_belatedPNG.fix(".imgpng,img");
});
</script>
<![endif]-->

html代码:

<div class="contain">
<h1>DD_belatedPNG实现IE6下的透明背景</h1>
<div class="con">
<h2>1、通过公共类pngFix</h2>
<p>
window.onload = function () {
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
</p>
<img src="../../Content/IMG/IE6.png" alt="" class="pngFix" />
<div class="imgpng pngFix"></div>
</div>
<div class="con">
<h2>2、直接用选择器:类名,ID,标签实现</h2>
<p>
DD_belatedPNG.fix(".imgpng,img");
</p>
<img src="../../Content/IMG/IE6.png" alt="" />
<div class="imgpng"></div>
</div>
</div>

css代码:

<style>
.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }
.contain .con { width: 400px; float: left; }
.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }
.contain h2 { font-size: 16px; color: #333; }
.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }
</style>

ie6中的透明图片不是透明显示的解决方案

一些图片存在着浏览器的兼容性,本身是透明的图片在ie6中却是不透明,比如:

在ie6中的效果

IE6兼容透明背景图片及解决方案

正常显示的效果

IE6兼容透明背景图片及解决方案

针对以上情况只需要在代码中最后加上下面这一段代码就可以解决了

<!--[if IE 6]>
<script type="text/javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
correctPNG();
</script>
<![endif]-->

IE6PNG透明解决方案

一、使用滤镜 代码:    

#pics
 {
  background:url(../images/Logo.png)no-repeat;
  /*以下为IE6设置PNG透明代码*/
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png");
 }

        提示:如果需要使其支持链接的hover,那么需要在CSS中定义:cursor:pointer;使其呈现手型,否则将为默认的鼠标状态。

优点

        1、绿色无插件;

        2、效率高,速度快;

        3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;

        4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;

缺点:

        1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺;

        2、不支持Img标签;  

        3、不支持CSS Sprite;

使用情况:

        1、当没有img引入png时可考虑;

        2、当没有CSS Sprite需求时可考虑;

        3、当没有平铺需求时候可考虑;

二、利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

页面中插入一段js即可。原理同上,只是将img标签用<span>标签替换掉,并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。

<!--[if IE 6]> 
<script>
function correctPNG() 
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " :"";
var imgClass = (img.className) ? "class='" + img.className + "'" : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " :"title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle = "float:left;" +imgStyle;
if (img.align == "right") imgStyle = "float:right;" +imgStyle;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
var strNewHTML = "<span "+ imgID + imgClass + imgTitle +"style=\"" + "width:" + img.width + "px;height:" + img.height + "px;" + imgStyle + ";" 
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +"(src='" + img.src + "',sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> ​

三、DD_belatedPNG.js文件

        1、引入js文件,同样由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:

        <!--[ifIE 6]><scripttype="text/javascript"src="js/DD_belatedPNG.js"></script><![endif]-->

        2、调用函数,设置参数如下:

 

DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");
            

  其中传入的参数为所使用png图片的标签的ID、类样式和标签名称,同样也可以按照下方这样来写

 

DD_belatedPNG.fix("#contentimg");

              此方法则表示#content下的所有img标签透明

              如果为链接和链接的hover设置透明,那么您按照下方这么来写,在部分版本里面可以不用加入:hover直接写选择器即可,但是为了保险,建议咱们还是加上:hover:

 

DD_belatedPNG.fix("#links,#link:hover");
             

写到这里并且您使用过jQuery或者CSSQuery类库,那么您一定熟悉上面的这种选择方法,总之就是,在CSS中您是如何选择的元素,那么在这个js函数(方法)中传入什么,只不过多个选择的时候,使用逗号隔开即可。

        小技巧:如果页面中存在很多png,DD_belatedPNG.fix();函数的参数岂不是很长?我们可以使用这种写法:

 

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

             如果使用上述的写法,我们的html中只需要在相对应的标签上加入class="pngFix"就行了,如果有多个类样式,按照平时的多个类样式的写法即可class="abc cbc pngFix",

             使用此方法的时候,我们每次都要加载两个js文件或者写两个<script>标签才行,这样不太好,http请求会增多,那么我们可以打开DD_belatedPNG.js文件,在尾部加入如下代码    

    即可:

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

             这样我们只需要引入此JS,在需要透明的标签上加入class="pngFix"即可,简单 · 方便 · 快捷!

优点:

        1、CSS代码无需任何修改,按照平时的思路来写即可;

        2、无需配置;

        3、没有多余的gif图片;

        4、支持img;

        5、支持平铺;

        6、支持CSS Sprite;

        7、支持Hover等伪类;

缺点:

        1、额外加入了js文件(6.39k)和http请求,可以忽略不计;

        2、当文件载入之前,会先暂时呈现灰底;

        3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);

以上就是本文讲述IE6兼容透明背景图片及解决方案的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
围观tangram js库
Dec 28 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
JavaScript实现表格快速变色效果代码
Aug 19 #Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 #Javascript
JS时间特效最常用的三款
Aug 19 #Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 #Javascript
JS模拟并美化的表单控件完整实例
Aug 19 #Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python整数对象实现原理详解
2019/07/01 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
研究生自荐信
2013/10/09 职场文书
家长对小学生的评语
2014/01/28 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
岗位说明书范文
2014/05/07 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年行政部工作总结
2015/04/28 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书