IE6下PNG背景透明的显示问题2

 五.让“块”透明的方法

1. .div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;} 

测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。

 六.DD_belatedPNG,解决IE6不支持PNG绝佳方案

整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat. 

而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>. 

看Demo: http://www.ediyang.com/demo/DD_Png/ 

原理 
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜. 

使用方法 
1.在这里下载DD_belatedPNG.js文件. 
http://dillerdesign.com/experiment/DD_belatedPNG/#download 

2.在网页中引用,如下:

1. <!--[if IE 6]>   
2. <script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>   
3. <script type="text/javascript">  
4.    
5.    
6. DD_belatedPNG.fix('.png_bg');   
7.    
8. </script> 
9. <![endif]-->   

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.  
  
使用a:hover请留意  
5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

1. <!--[if IE 6]>   
2. <script type="text/javascript" src="js/DD_belatedPNG.js" ></script>   
3. <script type="text/javascript">   
4. DD_belatedPNG.fix('.trans,.box a:hover');   
5. </script>   
6. <![endif]-->   

七.通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题

1. <script type="text/javascript" language="javascript"> 
2. function enablePngImages() { 
3. var imgArr = document.getElementsByTagName_r("IMG"); 
4. for(i=0; i<imgArr.length; i++){ 
5.    if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){ 
6.     imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')"; 
7.     imgArr[i].src = "spacer.gif"; 
8.    } 
9.    
10.    if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){ 
11.     var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2); 
12.     imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')"; 
13.     imgArr[i].style.backgroundImage = "url(spacer.gif)"; 
14.    } 
15. } 
16. } 
17.  
18. function enableBgPngImages(bgElements){ 
19. for(i=0; i<bgElements.length; i++){ 
20.    if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){ 
21.     //alert(bgElements[i]); 
22.     var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2); 
23.     bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')"; 
24.     bgElements[i].style.backgroundImage = "url(spacer.gif)"; 
25.    } 
26. } 
27. } 
28. </script> 
29.  
30. <img src="pngpic.png" alt="" border="0" /> 
31. <!--[if lt IE 7]> 
32. <script type='text/javascript'> 
33. var bgElements; 
34. enablePngImages(); 
35. if(bgElements){ 
36.    enableBgPngImages(bgElements); 
37. } 
38. </script> 
39. <![endif]-->