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

前端技术 2023/09/05 JavaScript

首先给大家展示效果图：

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中的效果

正常显示的效果

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

<!--[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兼容透明背景图片及解决方案的全部内容，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/12932

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案