我的联盟 作品 招聘 外包 人才  酷站加油 国内 国外 CSS  资源图库 图库 模板 矢量 图标  设计欣赏 界面 LOGO 插画 艺术  网页 平面  专访 名站 竞赛 社区
当前位置:首页 > 网页教程 > 其它教程 > 正文
IE6局部调用PNG32合并图片
来源:腾讯Webteam 作者:77 2009年03月11日 16:23 网友评论:0条 点击:

为满足用户的视觉追求及产品的背景图片的换肤功能,设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要,采用了PNG32的半透明图片还原设计稿。

但在IE6中遇到png兼容性,及其延伸的种种问题。如:

  1. png32的图片上在IE6有兼容性问题,原本的透明显示的背景将会失效。
  2. 在问题1的基础上,针对IE6采用了CSS滤镜让其透明,但图片不能应用背景坐标定位的方式只能单张使用,这做法不利于带宽流量和请求链接数之余也不利样式的管理
  3. 在问题2的基础上,意味着要把png图片单张切割,并单张应用CSS滤镜

针对以上问题重构师的解决办法如下

把背景图片如常的合并,利用相似于背景坐标的方式调用局部图片位置。最大区别在于分别定义了两个无意义的标签。

  • 一个标签作为模拟背景的载体标签:定义一个作为载体的标签,针对IE6以滤镜的形式导入图片,宽高与背景一致。
  • 另一个标签作为截取背景局部位置的截取标签:定义此标签宽高与预想调用背景局部位置大小一致,并隐藏其溢出的部份。
  • 最后计算出预想调用背景局部位置的坐标,定义在载体标签中。

HTML结构如下:

<div title="载体">
<div title=”截取”></div>
</div>

为了清晰的体现HTML结构,给标签添加了title属性,加以说明。本文实例:DEMO

实现步骤(分3步):

1、载体标签:定义一个作为载体的标签,针对IE6以滤镜的形式导入图片,宽高与背景一致。(注意:滤镜图片路径相对于页面,而不是CSS的位置)

<div title="载体" style="width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>

首页 上一页 [1] [2] 下一页 尾页
上一篇:常用原型图设计工具   下一篇:用私有属性拯救IE7缩放图片失真
收藏此页】【打印】【关闭
 相关文章  我要点评
·IE6浏览器倒计时中文官网上线
·中国1.6亿IE6用户将引厂商争抢
·微软建新网站呼吁用户停用IE6浏览器(图)
·10%用户仍使用IE6 企业寻求更安全版本
·微软高管称中国是IE6消亡最大障碍
·微软将支持IE6浏览器到2014年
·:hover在IE6下的问题
·解决IE6内存泄露的另类方法

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 设计服务 | 广告服务 | 常见问题 | 网站地图 | 法律声明 | 联系我们
Copyright © 2003-2012 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】