之前一直在用 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>
这个效果的具体样式是什么样的呢？嘿嘿，主题发布之日就能揭晓了～
1楼  IE6支持PNG格式图片的CSS滤镜写法 | ||||||||||||||||||||
网上购物、在线购物、购物搜索 欢迎光临本站购买图书、影视、音乐、数码、百货，手机等商品。 之前一直在用 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");
}
这里我写了一个实例：[url=http://zeuscn.net/download/ie6png.html]http://zeuscn.net/download/ie6png.html[/url]
使用 Firefox 和 IE7 浏览器看的话，2张图片没有区别，但使用 IE6 核心的浏览器看的话会发现第一张图片有白色背景——第一张图片是直接添加而没有使用滤镜。
#test {
background:url(h2-bg.png) no-repeat;
*background-image: none;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="[url=http://zeuscn.net/download/h2-bg.png]http://zeuscn.net/download/h2-bg.png[/url]", 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>
这个效果的具体样式是什么样的呢？嘿嘿，主题发布之日就能揭晓了～
• 详解Photoshop磨皮与锐化的全面应用(2) • Photoshop调出照片的古典浅黄色(2) • Photoshop为MM模糊照片磨皮及增强皮肤质感(1) • 详解Photoshop磨皮与锐化的全面应用(1) • Photoshop调出照片的古典浅黄色(1) • 教你C盘空间不足的有效清理方法 • Windows 7下运行CS 1.6的方法技巧 • 网页中Javascript代码的应用方式 • 删除Word插入表格后生成的空白页
| ||||||||||||||||||||
