png图片在ie6下透明效果
2011-06-16 17:47
267 查看
前一阵发现了一个问题，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>
效果：
<!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>
效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE6不支持PNG图片透明效果的完美解决方案（完善版)
- IE6不支持PNG图片透明效果的完美解决方案（完善版)
- IE6下PNG图片透明效果(PNG图片做背景也可以)
- IE6-能让png图片有透明效果的js代码
- IE6不支持PNG图片透明效果的完美解决方案（完善版)
- [Javascript] 解决 IE6 中 png 图片背景不支持透明效果的问题
- JS特效代码大全（一）IE6下PNG图片透明效果的JS特效代码
- IE6下使PNG图片透明
- IE PNG Fix—让IE6完美支持PNG透明图片的插件
- IE6 透明PNG图片BUG解决办法（转）
- 真正解决透明图片，png图片在ie6一下无法透明的实用方法
- 使用DD_belatedPNG让IE6支持PNG透明图片
- png图片在ie不透明的解决方案和浏览器通用的透明效果
- IE6给png图片添加透明级别
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 解决IE6透明PNG图片的代码
- IE6 透明PNG图片BUG解决办法
- png透明图片ie6下消除灰色背景
- 解决png图片在IE6下的透明问题