次方法需要用到一个插件:DD_belatedPNG.js
在ie6中的显示结果:
[img]http://dl2.iteye.com/upload/attachment/0087/3002/a2efcc4d-36af-3cae-b3b9-5a95f6451402.gif[/img]
所用的到得图片和插件:
[img]http://dl2.iteye.com/upload/attachment/0087/3000/2edc84b8-8b89-3fd9-9e6c-16e01ee6c48d.png[/img]
<!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=utf-8" />
<title>兼容png图片的前置与背景</title>
<link href="css/ddd.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<p>一、png图片为前置img图片</p>
<!--******************************************-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.on img');
</script>
<![endif]-->
<div style="background:#936;width:100px;height:100px;">
<div class="on"><img src="images/png241_03.png" /></div>
</div>
<hr /><!--******************************************->
<p>二、png图片作为背景图片</p>
<!--******************************************88-->
<div style="background:#30F;width:100px;height:100px;">
<div class="of"></div>
</div>
<p>
在第二个中,一定要注意css图片背景的路径<br />
background:url(../images/png241_03.png);与_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/png241_03.png"); 的路径是不一样的,前者是正常的路径,后者相当于在html中的前置img的路径。
</p>
<!--******************************************88-->
</body>
</html>
.of{
width:42px;
height:42px;
background:url(../images/png241_03.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/png241_03.png");
}
在ie6中的显示结果:
[img]http://dl2.iteye.com/upload/attachment/0087/3002/a2efcc4d-36af-3cae-b3b9-5a95f6451402.gif[/img]
所用的到得图片和插件:
[img]http://dl2.iteye.com/upload/attachment/0087/3000/2edc84b8-8b89-3fd9-9e6c-16e01ee6c48d.png[/img]