IE6 png背景图片显示不正常处理

http://xiaoboss.iteye.com/blog/1167829

现在web设计，画面是越来越炫

但是使用了透明的背景图，在IE6下，

在ie78 ff等浏览器显示正常。

解决办法：

Html代码

body{ background-color:#CCC;}
一般普通写法如下：
div.bg1{ background:url(logo.png) no-repeat center;width:100px; height:100px;}
特殊处理写法如下：
/** Only Used For IE */
*.bg2{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="logo.png"); width:100px; height:100px;}
/** Only Used For FF,Sa*/
html > body .bg2{ background:url(logo.png) no-repeat center;width:100px; height:100px;}

一下是html调用css写法:

Html代码

<body>
<div class="bg1">test content</div>
<hr/>
<div class="bg2">test content</div>
</body>

一下为ie7对比显示，上面为一般写法，可以发现ie6处理的不好。

下面为特殊写法，可见比较完美。

分析：

ie系列浏览器可以通过filter 属性来设置背景图，而filter属性在除ie系列浏览器就不生效。

所以这里想到hack处理办法。

IE系列自己特殊的css写法可以通过*，*.bg2 这种css样式只能在ie系列浏览器生效

同样使用html > body .bg2，只有IE系列不生效的写法。

这样可以看出效果在ie ff等下都显示正常

案例1:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>
<body>
<div class="qq"></div>
</body>
</html>

案例2: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用，否则会导致页面打开很慢!!!)

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(thisthis.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
</style>
</head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>

案例3:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
var imgimgName = 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
jj = j-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>
<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" />
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>

案例4：

Html代码

<script language="javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' ";
var imgStyle = "display:inline-block;" + myImage.style.cssText;
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
myImage.outerHTML = strNewHTML;
} }
window.οnlοad=function(){
document.getElementById("top").style.height=screen.height/5+"px";
}//
</script>

用法如下：
<img src="logo.png" width="328" height="325" border="0" οnlοad="fixPNG(this)" />

以下是微软官方提供的解决方法:

Js代码

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
Based in part on code from from http://homepage.ntlworld.com/bobosola.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
function fixPng() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.indexOf(".PNG") > 0) {
var width = img.width;
var height = img.height;
var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
img.src = "images/blank.gif";
img.width = width;
img.height = height;
}
}
}
}
fixPng();

转载于:https://www.cnblogs.com/zhp404/articles/3974913.html

IE6 png背景图片显示不正常处理相关推荐

微信小程序之页面样式以及背景图片显示问题
##一.背景下面这些都是在开发的过程中,记录下来的笔记. ##二.样式及背景图片显示问题 1.修改单个页面的背景色: 在页面的wxss里面加上这句代码: page{background-color: ...
html内容被背景图片遮住怎么办_定义BODY背景图后，DIV的背景图片显示不全（已解决）...
你的位置: 问答吧 -> WEB标准 -> 问题详情定义BODY背景图后,DIV的背景图片显示不全(已解决) 一个有趣的问题,当BODY有背景图片的时候,BODY里的DIV一旦也有背景图 ...
css 设置背景图一半_css怎么背景图片显示不全？
css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全. 其中导致背景图片显示不 ...
vue打包部署服务器，背景图片显示空白
vue打包部署服务器后,往往会出现部分背景图片显示空白的情况,部分就说明只是打包过程中的图片路径问题: 在build 文件夹中找到 utils.js文件加上这行代码即可:publicPath: '-/ ...
android+背景图片不显示,背景图片显示问题图片显示错误 android开发
先贴出我的配置文件代码 android:layout_width="fill_parent" android:layout_height="fill_parent&quo ...
html内容被背景图片遮住怎么办_css背景图片显示不完怎么解决？
css背景图片显示不完是什么原因?怎么解决?下面本篇文章就来给大家介绍一下css背景图片显示不完的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css设置背景图片显示不全 ...
css的背景图片不显示,wepback打包时，css的背景图片显示不出来，求教！
如题.项目环境使用 webpack 构建的,webpack 这块配置的相关代码是 module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_ ...
html 文字在背景图片上,如何让文字作为CSS背景图片显示
在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图. 关键如何把文字变成背景图 ...
微信小程序背景图片base64_微信小程序背景图片显示不出来
开发小程序的时候,设置页面的背景,用到css代码:.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/im ...

IE6 png背景图片显示不正常处理

IE6 png背景图片显示不正常处理相关推荐

最新文章

热门文章