IE6兼容png24
(2011-02-15 14:15:47)
标签:
png24锯齿ie滤镜ie6半透明it |
分类: CSSie6 |
Firefox,IE7/8都能支持png24透明/半透明图片,可万恶的IE6不支持
Bug病症:
ie6会让半透明的图片叠加在白色上面,让它不透明,在完全透明的位置填充白色,产生锯齿。
吖真老中医处方:
background:url(../images/×.png) no-repeat left top;
_background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/×.png');
第一句为正常背景语句不解释
第二句消去ie6的背景图
第三句使用只有IE支持的滤镜读入对应的背景图
注意:滤镜的图片路径是以页面为基点,并非以CSS文件。
此方法可让IE6支持png24,效果甚佳屡试不爽,但是
1、图片只能用背景图显示
2、不能同时对该元素进行定位
如果需要用这方法又要定位,那也还是有办法的,就是在此元素外加个包围元素,给它定位即可(不能给它定位,没说不能给它老爸定位哈)
这个只限制与给单独的元素添加,想批量的修改,就添加如下的js:
<script language="javascript">
function correctPNG()
{
for(var i=0;
i<document.images.length;
i++)
{
var img =
document.images[i]
var imgName =
img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) ==
"PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " :
""
var imgClass = (img.className) ? "class='" + img.className + "' " :
""
var imgTitle = (img.title) ? "title='" + img.title + "' " :
"title='" + img.alt + "' "
var imgStyle = "display:inline-block;" +
img.style.cssText
if (img.align == "left") imgStyle = "float:left;" +
imgStyle
if (img.align == "right") imgStyle = "float:right;" +
imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" +
imgStyle
var strNewHTML = "<span " + imgID + imgClass +
imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height +
"px;" + imgStyle + ";"
+
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\',
sizingMethod='scale');\"></span>"
img.outerHTML =
strNewHTML
i = i-1
}
}
}
function alphaBackgrounds(){
var rslt =
navigator.appVersion.match(/MSIE (d+.d+)/,
'');
var itsAllGood = (rslt != null
&& Number(rslt[1])
>= 5.5);
for (i=0;
i<document.all.length; i++){
var bg =
document.all[i].currentStyle.backgroundImage;
if (bg){
if (bg.match(/.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
//alert(mypng);
document.all[i].style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"',
sizingMethod='crop')";
document.all[i].style.backgroundImage =
"url('')";
Bug病症:
吖真老中医处方:
background:url(../images/×.png) no-repeat left top;
_background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/×.png');
第一句为正常背景语句不解释
第二句消去ie6的背景图
第三句使用只有IE支持的滤镜读入对应的背景图
注意:滤镜的图片路径是以页面为基点,并非以CSS文件。
此方法可让IE6支持png24,效果甚佳屡试不爽,但是
1、图片只能用背景图显示
2、不能同时对该元素进行定位
如果需要用这方法又要定位,那也还是有办法的,就是在此元素外加个包围元素,给它定位即可(不能给它定位,没说不能给它老爸定位哈)
这个只限制与给单独的元素添加,想批量的修改,就添加如下的js:
<script language="javascript">
function correctPNG()
function alphaBackgrounds(){