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 到 JQuery (1)学习小结
Feb 12 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python中str.join()简单用法示例
2018/03/20 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
好邻里事迹材料
2014/01/16 职场文书
会计电算化专业求职信
2014/06/10 职场文书
教师暑期培训感言
2014/08/15 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年教师工作总结
2014/11/10 职场文书
初中班主任工作总结2015
2015/05/13 职场文书