前一阵发现了一个问题,png格式的透明图片在ie6下透明部分还是会有底色,找了一下解决方法发现有一个叫AlphaImageLoader的滤镜可以解决这个问题,以下的代码是从网上找来的,加了点注释。
<!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>无标题文档</title>
<style type="text/css">
img
{
border: 0;
}
body
{
background-color: #999;
}
.bigName .logo
{
/* 就是这个滤镜,需要进一步了解的同学请参考http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx */
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='Images/logo.png');
_background-image: none;
}
h1.logo
{
width: 153px;
height: 59px;
}
h1.logo a
{
display: block;
height: 59px;
width: 153px;
}
</style>
</head>
<!-- 加个背景图片 -->
<body style=" background-image:url('Images/bg.jpg')">
<div class="bigName">
<h1 class="logo">
<a href="javascript:;" id="id1"></a>
<script type="text/javascript">
var isie6 = window.XMLHttpRequest ? false : true;
// ie6以上版本直接显示在控件中,ie6的话用背景显示
if (!isie6) {
document.getElementById('id1').innerHTML = '<img src="Images/logo.png" />';
}
</script>
</h1>
</div>
</body>
</html>
效果: