IE6局部调用PNG32合并图片
作者:77 来源:腾讯Webteam 发布时间:2009-03-11 21:24:00
标签:ie6,png32,图片,浏览器,透明
为满足用户的视觉追求及产品的背景图片的换肤功能,设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要,采用了PNG32的半透明图片还原设计稿。
但在IE6中遇到png兼容性,及其延伸的种种问题。如:
png32的图片上在IE6有兼容性问题,原本的透明显示的背景将会失效。
在问题1的基础上,针对IE6采用了CSS滤镜让其透明,但图片不能应用背景坐标定位的方式只能单张使用,这做法不利于带宽流量和请求链接数之余也不利样式的管理
在问题2的基础上,意味着要把png图片单张切割,并单张应用CSS滤镜
针对以上问题重构师的解决办法如下:
把背景图片如常的合并,利用相似于背景坐标的方式调用局部图片位置。最大区别在于分别定义了两个无意义的标签。
一个标签作为模拟背景的载体标签:定义一个作为载体的标签,针对IE6以滤镜的形式导入图片,宽高与背景一致。
另一个标签作为截取背景局部位置的截取标签:定义此标签宽高与预想调用背景局部位置大小一致,并隐藏其溢出的部份。
最后计算出预想调用背景局部位置的坐标,定义在载体标签中。
HTML结构如下:
<div title="载体">
<div title=”截取”></div>
</div>
为了清晰的体现HTML结构,给标签添加了title属性,加以说明。
本文实例:ie6-PNG32.htm
实现步骤(分3步):
1、载体标签:定义一个作为载体的标签,针对IE6以滤镜的形式导入图片,宽高与背景一致。(注意:滤镜图片路径相对于页面,而不是CSS的位置)
<div title="载体" style="width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>
0
投稿
猜你喜欢
- 高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小,更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们
- ctrl+Enter:重建ctrl+0:相当于点击当前行左方的加号或减号ctrl+E:打开新窗口预览ctrl+T:替换\t为两个空格tab:
- <'% '************************************************
- 软件环境: 1、操作系统:Windows 2000 Server 2、数 据 库:Oracle 8i R2 (8.1.7) for NT 企
- 【原文地址】 Fixes for Common VS 2008 and .NET 3.5 Beta2 Issu
- 常规循环引用内存泄漏和Closure内存泄漏 要了解javascript的内存泄漏问题,首先要了解的就是javascript的GC原理。我记
- Oracle数据安全面面观 作者:づ★sl战神 随着计算机的普及以及网络的发展,数据库已经不再仅仅是那些程序员所专有的话题。而Oracle数
- --sql语句就用下面的存储过程 /*--数据导出Excel导出查询中的数据到Excel,包含字段名,文件为真正的Excel文件,如果文件不
- 最好也是最简单的办法就是利用Cookie,而不必用到数据库。当然,你愿意用数据库也可以。下面就是利用Cookie来实现的:< 
- 从98年某月某日我的第一个个人猪页诞生.到2008年的今天.宣告了我从事设计行业整整十年.十年,很多变化,从摆弄个人猪页到现在以做设计为生,
- 年初的时候收藏过一篇关于mysqlreport的报表解读,和内置的show status,和show variables相比mysqlrep
- 我们用下了asp代码简单统计了下载一个文件需要的时间:<%Function DownloadTime(intFileSize
- 介绍:细处着手,巧处用功。高手和菜鸟之间的差别就是:高手什么都知道,菜鸟知道一些。电脑小技巧收集最新奇招高招,让你轻松踏上高手之路。 摘 要
- 不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局,在稍后的文章中我会详细的介绍浮动元素。好,回到刚才的话题,大
- 注:IE8以前的版本均不支持该特性为了向文档中插入生成内容,可以使用:before与:after伪元素。如,我想在所有链接的后面加上&quo
- 如何用拦截表单的方法上传图片? 看下列代码:<script language="
- Inserted 表中的行是触发器表中新行的副本。 语法 返回所有列 INSERT INTO [tableName] ([columnNam
- 译序:这篇文章是可用性大师 Jakob Nielsen 在10年前总结的,到今天仍然受用。通过这个时间跨度,可以得出,可用性话题不是某个时代
- 使用SQL Server事件探查器工具,你可用一个捕获到的跟踪来收集有关服务器的重要信息。与索引优化向导(Index Tuning Wiza
- 关于数据库的逻辑设计,是一个很广泛的问题。本文主要针对开发应用中遇到在MS SQL Server上进行表设计时,对表的主键设计应注意的问题以