两种一张图片一份为二的Method

27. December 2015 HTML5 0

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>两种一张图片一份为二的Method</title>
<style type=”text/css”>
body{
background-color:#FFC;
}
#pic{
background: url(‘images/part.jpg’) 0 0 no-repeat;
width:300px;
height:347px;
}
#pic:hover{
background-position: -300px 0px;
}
#content{
width: 800px;
height: 1000px;
margin: 0 auto;
}
#contents{
width: 800px;
height: 450px;
text-align: center;
}
#content1{
width: 310px;
height: 600px;
float: left;
text-align:center;
margin-left:60px;
}
#content2{
width: 310px;
height: 600px;
float: left;
margin-left:60px;
}
#content2 img{
position:absolute;
clip:rect(0px,300px,347px,0px);
}
#content2 img:hover{
position:absolute;
clip:rect(0px,300px,347px,0px);
clip:rect(0px,600px,347px,300px);
margin-left:-300px;
}
#content_text{
width: 600px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -300px;
margin-top: 450px;
text-align: center;
}
#return{
position: absolute;
width: 100px;
height: 100px;
top: 900px;
right: 20px;
}

</style>
</head>

<body>
<div id=”content”>
<div id=”contents”>
<h2>两种一张图片一份为二的Method,使用图片局部哦,原图如下</h2>
<img src=”images/part.jpg”>
</div>
<div id=”content1″>
<h3>方法一使用background-position</h3>
<div id=”pic”></div>
</div>
<div id=”content2″>
<h3>方法二使用Clip属性来获取图片部分</h3>
<img src=”images/part.jpg”>
</div>
<div id=”content_text”>
<h3>详情查看源代码哦!
<p>Created by: <a href=”http://bloglijian.sinaapp.com” target=”_blank” >LiJian</a> 2015 &copy;136887433</p>
</h3>
</div>
<div id=”return”><a href=”index.html”><img src=”images/return.png” width=”100px;”></a></div>
</div>
</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *