分享
 
 
 

IE6支持PNG格式图片的CSS滤镜写法

王朝html/css/js·作者佚名  2008-08-07
窄屏简体版  字體: |||超大  

之前一直在用 gif 图片或者用和背景色相同的 jpg 图片回避 IE6 不支持 PNG 图片背景色透明的 BUG,不过在做大菠萝3(Diablo III)主题时不愿放弃自己一个比较酷的 Idea,所以我还是决定要解决这个 BUG。

网上关于解决 IE6 这个 BUG 的方法很多,有用 JS 的,也有用 IE6 的 CSS 滤镜的。稍微看了一下,JS 的方法仅用于单个图片的效果,但若拿图片作背景则不行。CSS 滤镜的写法则简单很多,也能用作背景,但还是存在一个问题,图片的地址只能使用“绝对地址”,而我们在模板的 CSS 样式表里使用的大多是相对地址,虽然也可以使用绝对地址,但是不同的用户使用该模板的话就必须修改其绝对地址,对于不懂 CSS/HTML 的人来说,无疑这是一道“坎”。不过后来猫猫的一句话让我如梦初醒——可以把这段 CSS 写在 head 里,这样就可以用 Wordpress 自己的 PHP 语句来调用绝对地址了!

让 IE6 支持 PNG 图片背景透明的 CSS 滤镜写法如下:

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="filename.png", sizingMethod="scale");

}

这里我写了一个实例:http://zeuscn.net/download/ie6png.html

使用 Firefox 和 IE7 浏览器看的话,2张图片没有区别,但使用 IE6 核心的浏览器看的话会发现第一张图片有白色背景——第一张图片是直接添加而没有使用滤镜。

#test {

background:url(h2-bg.png) no-repeat;

*background-image: none;

*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="http://zeuscn.net/download/h2-bg.png", sizingMethod="scale");

height:85px;

width:66px;

}

我们可以从实例中的代码看到,由于 HTML 文件和图片 h2-bg.png 位于相同目录,所以这里的背景链接我是使用的相对地址。而下面的 CSS 滤镜我使用的是绝对地址。这里我为了兼容 Firefox IE6 和 IE7 我使用了 Hack 的写法:属性前添加 “*” ——只让 IE 核心的浏览器识别。

那么在 Wordpress 模板的 head 标签内的 CSS 样式表调用之后,添加了下面的样式代码来绕过在样式表内使用绝对地址的问题:

<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />

<style>

.post .title-bg {

height:85px;

width:65px;

*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="<?php bloginfo('stylesheet_directory'); ?>/images/h2-bg.png", sizingMethod="scale");

position:absolute;

}

</style>

这个效果的具体样式是什么样的呢?嘿嘿,主题发布之日就能揭晓了~

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有