解决PNG图片在IE6中背景不透明的问题

1、解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP


JS代码




 function
correctPNG() // correctly handle PNG transparency in Win IE 5.5 &
6.
{
var arVersion =
navigator.appVersion.split("MSIE")
var version =
parseFloat(arVersion[1])
if ((version >= 5.5) &&
(document.body.filters))
{
for(var j=0;
j<document.images.length; j++)
{
var img
= document.images[j]
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
j = j-1

}
}
}
}

window.attachEvent("onload", correctPNG);

CSS代码




 #id{background:url(图
片路径) ;_filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,
sizingMethod=‘scale‘, src="图片路径");_background:none;}

 

2、解决png图片在html中作为IMG标签使用时,PNG图片IE6中背景不透明方法 (JS)   -  
TOP


1、新建一个JS文件为iepngfx.js,进以上JS代码拷贝到JS文件里

2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中
只允许IE6读取此JS文件方法:
< !--[if IE
6]>
< script src="images/iepngfx.js" language="javascript"
type="text/javascript"></script>
< ![endif]-->

3、在html中使用图片标签IMG运用PNG图片,在IE6试试看PNG图片背景是否透明了。

3、解决png图片作为网页背景时,在IE6中背景透明方法 (
CSS)  -   TOP

同样方法
1、新建JS文件同上,命名为iepngfx.js,进以上JS代码拷贝到JS文件里

2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中
只允许IE6读取此JS文件方法:
< !--[if IE
6]>
< script src="images/iepngfx.js" language="javascript"
type="text/javascript"></script>
< ![endif]-->

3、在CSS中运用PNG图片作为背景的地方加入以下CSS代码:




 #id{background:url(图
片路径) ;_filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,
sizingMethod=‘scale‘, src="图片路径");_background:none;}

 

这样即可解决PNG图片在HTML中img作为图片图标背景不能透明或PNG图片作为网页背景background运用的一样实现PNG图片背景透明。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-hack/c265.shtml

时间: 2024-11-08 19:46:21

解决PNG图片在IE6中背景不透明的问题的相关文章

解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背

解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背 目录 解决代码 解决png图片在html中 解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP JS代码  function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE&quo

2.png图片在ie6下不透明

写在前面的话: 下面这些方法也是找来的,原文链接也都附上了~ 1.  ie6png背景图 if(window.XMLHttpRequest){ //Mozilla,Safari,IE7 if(!window.ActiveXObject){ //Mozilla,Safari, alert('Mozilla,Safari'); }else{ alert('IE7'); } }else{ alert('IE6'); } ie6 png 背景图  可以用滤镜使其透明: _background:none;

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

接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngtest{ background:url(mark.png); _background:url(mark.gif);} 优点:方便.快捷,使用超简单 缺点:对于PNG图片只是某些局域透明,该方法比较奏效,但图片要是半透明的话,这种方法就实现不了 该方法延伸的另外一种解决办法:用PS或者其他图片编辑工具把

IE6中png背景图片透明的最好处理方法

在IE6浏览器下png(24位)的图片显示是不能透明的. 1.处理办法就是用DDPngMin.js <!--[if IE 6]> <script src="js/DDPngMin.js"></script> <script>DD_belatedPNG.fix('.ad_img img,#banner_ctr ul');</script> <![endif]--> 第一种办法适合用于背景图用颜色不能表示的情况,只能用

ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法

IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是,就怕碰到需要调兼容ie6的网站. 其中,一个IE6常见问题就是IE6透明背景问题了.透明背景主要分背景颜色透明和背景图片或者png图片透明问题. 一.IE6背景颜色透明 一般浏览器,给一个盒子透明背景写法是 :opacity: 0.5;   -moz-opacity: 0.5;-webkit-op

PNG24图片兼容IE6解决办法

很多人都遇到一个问题:那就是PNG不能正常显示,比如: 网上试过的很多办法都很难实现,要嘛就是效果不好,那现在最好的办法就是直接调用JS插件,解决! 点击下载 现在说一下怎么用这个文件吧! 首先看下代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>PNG24兼容IE6</title> <style type='text/css'&g

IE6中的常见BUG与相应的解决办法

开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE6BUG,以及解决的办法. 一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:in

前端问题——png图片在IE6下透明失效,解决办法

今天,一位同事问我问题,png 图片在IE6下透明背景失效. 解决办法,在网上查了很多,最后还是采用两种方案来解决这个问题 1.把这个网页的png格式图片变更为gif格式的图片.问题解决 2.就是让这个网页引用一段JS代码,如下: 1 if (!window.XMLHttpRequest) { 2 window.attachEvent("onload", enableAlphaImages); 3 } 4 5 function enableAlphaImages(){ 6 for (v

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是