注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 

日志

 
 
 
 

怎么让背景图片在IE6上透明  

2012-03-12 14:01:07|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是IE6对于PNG图片的支持却不是很理想,Firefox和Opera对PNG的支持还是比较友好,特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。许多的前端爱好者都是非常痛恨IE6的,但是却不能忽略它的存在;所以怎么让背景图片在IE6上透明成了一件头疼的事。

IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型

CSS:

#wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for ie 6.0*/
html>body #wrap{background: url(img/bgcanvas.png) repeat;}
/*for ie 6.0*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://aramey.blog.163.com/blog/img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}

代码:

<div id="wrap">

<p><a href="http://aramey.blog.163.com/">怎么让背景图片在IE6上透明</a><br />:PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是IE6对于PNG图片的支持却不是很理想,Firefox和Opera对PNG的支持还是比较友好,特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。许多的前端爱好者都是非常痛恨IE6的,但是却不能忽略它的存在;所以怎么让背景图片在IE6上透明成了一件头疼的事。</p>

<p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型</p>

<p><a class="test" href="http://aramey.blog.163.com/">这里是个超链接测试</a></p>

</div>

经测试,兼容IE6.0 Firefox 1.5 Opera 8.5,因为AlphaImageLoader滤镜不支持IE5.0,所以IE5.0没有达到想要的效果,基本IE5.0与PNG无缘了。

关于AlphaImageLoader滤镜

语法:
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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

推荐:使用PS来调整PNG在IE6上的背景透明。

步骤1:图像--->模式--->选择(索引颜色)
怎么让背景图片在IE6上透明
 
步骤2:调板:实际,强制:无,选择透明度,杂边:无!
怎么让背景图片在IE6上透明

步骤3:按 Ctrl+Shift+s 保存为PNG格式。
图片就会在IE6里变透明!

如果需求比较高,需要的图片要求高,可以设置杂边,颜色跟图片的背景色或前景色一样就好。

如图:
怎么让背景图片在IE6上透明 - Aramey - Aramey
 如此就好。
  评论这张
 
阅读(2095)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017