clip:rect上sprite图片定位和png通道透明 _Web前端

clip:rect下sprite图片定位和png通道透明

<!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>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
.clip_a {
?display:block;
?width:128px;
?height:128px;
}
.clip_a img {
?border:0;
?position:absolute;
?clip:rect(0 128px 128px 0);
}
.clip_a:hover {
?border:0;
}
.clip_a:hover img {
?margin-top:-128px;
?clip:rect(128px 128px 256px 0);
}
.ie6_visible {
?display:none;
?_display:inline;
}
</style>
</head>
<body>
<div id="main">
? <div id="effect" class="part">
??? <h3>效果：</h3>
??? <div class="show">
????? <div class="demo"> <a href="javascript:" class="clip_a"><img id="pngImage" src="http://image.zhangxinxu.com/image/blog/201104/sofa_sprite.png" /></a> </div>
??? </div>
? </div>
</div>
</div>
<script>
?var oImage = document.getElementById("pngImage");
??oImage.src = "http://www.zhangxinxu.com/study/image/pixel.gif";
??oImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://image.zhangxinxu.com/image/blog/201104/sofa_sprite.png')";
</script>
</div>
</body>
</html>