HOME
BBS
深山帮帮欢迎您,您可以注册或者
qq登录只需一步,快速开始
深山旅行社网站管理系统开发完成,欢迎各位网友测试! 点这里测试
565449214 给站长留言
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

IE6下用CSS使PNG半透明背景图片效果

网络 2008-5-28 12:44:00 深山行者 字体:  浏览 12048 我要评论

PNG半透明背景图片效果
PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

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

追加另外的一种方法

.menuqi  {
      FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=./skin/01/images/menuqi06.png,sizingMethod='scale');
      /*蓝色部部:是针对IE背景进行设置的*/
      background:url(./images/menuqi06.png) no-repeat !important;
      /*针对IE7,FF或者更高版本设置*/
      background:none;
}

 

HTML: 以下是引用片段:
<div id="wrap">
<p><a href="http://www.jluvip.com"><strong>PNG半透明背景图片效果</strong></a><br />:PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出需要使用绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。</p>
<p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</p>
<p><a class="test" href="#">这里是个超链接测试</a></p>

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="img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}

以下为详细代码
Ads loading...
相关阅读
( 2018-3-16 17:00:02 )利用aspJpeg组件生成多图片水印组合时给加上透明水印图片
( 2012-4-22 15:07:26 )png显示叉号的解决办法(IE无法显示PNG格式图片的解决办法)
( 2011-8-23 8:29:20 )旅游网站的企业站自定义功能完成。
( 2010-9-3 11:45:22 )利用ASP正则提取文章里面的图片的有效的src地址
( 2010-7-12 17:10:25 )IE6不支持png24的解决办法(png24做为css的背景)
( 2009-12-22 14:07:42 )javascript实现图片预览功能
( 2009-8-18 10:17:12 )ASP导出WORD或Excel文档(比较另类,而且超级强的。)
( 2009-8-15 9:26:32 )div+CSS的无限级扩展下拉菜单(全部加了注释)
共有0条关于《IE6下用CSS使PNG半透明背景图片效果》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 400 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

Ads loading...
更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
Ads loading...
更多>>最新添加文章
asp利用sql操作数据表、数据库的一些方法
rs操作数据表记录集对象的方法
asp利用dateadd获得上个月、本月、下个月的第一天和最后一天
asp随机显示字符长度与类型(可随机显示数字、小写字母、大写字母,可以做为随机密码使用)
[转载]中国行政区划数据(省市区街道)
ASP版通过身份证信息获取对应的生日性别年龄
最新县及县以上1980年以来历史行政区划代码大全截止2018年3月31日
ASP网站打开特别卡 提示:msxml3.dll 错误 '80072ee2' /LM/W3SVC/670931603/Root/global.asa解决办法
  • 业务 QQ:565449214
  • 手机:139 6134 7334
更多>>随机抽取信息
CSS布局实例:上中下三行,中间自适应
加长增高对话框与文本框
连云港旅游网
利用CSS制作的网站中新闻文章列表效果
层展开/关闭 - 运动缓冲效果
汽车交易网站
关于字体在CSS中处理效果的思考
百度蜘蛛饲养技巧
Ads loading...