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

最新推荐文章于 2020-11-20 07:18:59 发布

axl234

最新推荐文章于 2020-11-20 07:18:59 发布

阅读量81

点赞数

分类专栏： javascript 文章标签： CSS JavaScript XHTML Microsoft HTML ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/83886941

版权

javascript 专栏收录该内容

158 篇文章 0 订阅

订阅专栏

<!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>

axl234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clip:rect下sprite图片定位和png通道透明

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
复制链接

扫一扫

专栏目录