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 相关文章推荐
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
vue3.0 上手体验
Sep 21 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python使用configparser库读取配置文件
2020/02/22 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
物业管理个人自我评价
2013/11/08 职场文书
员工晚婚的请假条
2014/02/08 职场文书
《乌塔》教学反思
2014/02/17 职场文书
小班下学期评语
2014/05/04 职场文书
企业读书活动总结
2014/06/30 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
离婚协议书范文2015
2015/01/26 职场文书
离婚被告代理词
2015/05/23 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技