夏日博客

A-A+

ie下png透明度各种方法总结

2016年01月27日 前端设计 暂无评论 阅读 6 views 次

本文章总结了一些常的方法解决在ie浏览器下png透明度各种方法总结,有需要的朋友可参考本文章。

IE家族只有9以后的版本支持该属性；

有童鞋可能对rgba的使用环境不大清楚，但肯定熟悉opacity属性。opacity实现了元素的alpha通道，如opacity:0.5表示50%的透明度，但opacity不止实现了元素的透明度，同时包括元素的子元素也有该透明度，比如如下 代码:

  1. <div style="background:#000;opacity:0.5">我是内部文本</div>  

将使整个节点树显示为50%的透明灰度；而rgba可以直接表示颜色属性和透明度，比如如下代码:

  1. <div style="background:rgba(0,0,0,0.5);">我是内部文本</div>  

前三个参数是颜色的RGB表示法,如0,0,0就表示黑色,最后一个参数是alpha值,和opacity具有相同的意思,但这次的设置是使

的背景色变为50%的透明灰度,内部节点和内容依然是不透明的,对于支持该属性的浏览器可以直接使用如下代码:

.class{ background: rgba(0,0,0,0.75);}

针对IE6-8的hack为：

.class{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);}

用到了IE自家的filter滤镜,IE虽然不支持很多标准,但自己也提供了很多有意思的功能,比如filter滤镜、expression行内表达式等,相关的参数我不再解释,自己查查,提示两点:

1.startColorstr和endColorstr的值由两部分组成：前两位是alpha值，后六位是颜色值，都是十六进制表示法；可以用x=a*255(其中x是表达式的16进制值，a表示alpha值如0.5)；

2.因为IE5+都是支持filter的，所以可以这样写：

  1. <!--[if IE 8]>  
  2. <style>  
  3. .class{-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000)";}  
  4. </style>  
  5. <![endif]-->  

如果写在css里，因为IE9+既支持filter，又支持rgba，所以会看到两者叠加的效果。

② png透明度支持，目前只有IE6无法实现。

这是IE6的老问题了，网上有很多相关的解决办法，归结起来有三种：

1.使用htc文件修复(自行查找相关文章) ；

2.js修复；

3.css hack。

这里主要说下css hack方法。通过filter我们可以间接让IE6支持png的alpha值(注:这种方法适合用png作为背景图的hack)，比如为某个元素设置了背景图,代码如下:

1..class{background:url(images/bg.png)}

则相应的hack写法,代码如下:

  1. .class{  
  2.     background:url(images/bg.png);  
  3.     /*IE6清除背景图*/  
  4.     _background:none;  
  5.    /*用filter载入的png图片就具有了alpha属性*/  

6. _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="misc/images/icon_circle.png")}

filter的相关属性和缺点(性能和不能平铺等)在此不赘述，需要注意的是对应的路径，虽然同样是写在css里，但filter的运行环境是相对于当前文档，而不是当前css，所以css中的url相对路径和filter中的路径很可能是不相同的，为了避免出错，你也可以使用完整路径.

几种不错的方法 推荐,代码如下:

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。

false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。

image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：

Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。

sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。

src : 可读写。字符串(String)。参阅 src 属性。

说明：

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

实例：解决IE6下png透明失效的问题。

CSS样式,代码如下:

  1. .png{  
  2. _background: url(/images/angel.png) no-repeat !important;  
  3. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="/images/angel.png");  
  4. background:none;  
  5. width:118px;height:133px;  
  6. }  
  7. .png div{position:relative;}  

HTML代码:

  1. <div class="png">  
  2. <div>  
  3. CSS 背景PNG透明 及 链接失效问题解决  
  4. </div>  
  5. </div>  
  6.    
  7. /*  
  8. 兼容IE6.0、IE7.0、FF，  
  9. IE7.0和新版的FF其实是可以不加filter滤镜直接透明的。  
  10. */  

第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了,注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. <style type="text/css">  
  7. <!--  
  8. .qq {  
  9. height: 90px;  
  10. width: 90px;  
  11. background-image: url(icon_home.png)!important;/* FF IE7 */  
  12. background-repeat: no-repeat;  
  13. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */  
  14. _ background-image: none; /* IE6 */  
  15. }  
  16. -->  
  17. </style>  
  18. </head>  
  19. <body>  
  20. <div class="qq"></div>  
  21. </body>  
  22. </html>  

第 2 种方法: 给img定义样式，页面上所有透明png即自动透明了,这方法只对直接插入的图片有效,对背景图无效,注意,要准备一个透明的小图片transparent.gif,大小不限,必须放在和html相同的目录,请勿大量使用，否则会导致页面打开很慢!!!

标签：

给我留言