clip属性我在之前还没有怎么用过，今天学习了一下，发现应该还是一个比较有用的，而且所有的主流浏览器都可兼容！~~
用clip属性来裁剪图片十分的简单。
代码
<!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>clip样式</title>
<style>
body{
background:#FFC;
color:#F00;
}
.box{
position:relative;
width:270px;
height:310px;
float:left;
padding-left:50px;
}
.img{
position:absolute;
clip:rect(155px 420px 475px 170px);
margin-left:-170px;
margin-top:-155px;
}
</style>
</head>
<body>
<div style="float:left">原图：<img src="b_1258684795515.jpg" style="vertical-align:top;" /></div>
<div class="box">
clip:<img src="b_1258684795515.jpg" class="img" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clip样式</title>
<style>
body{
background:#FFC;
color:#F00;
}
.box{
position:relative;
width:270px;
height:310px;
float:left;
padding-left:50px;
}
.img{
position:absolute;
clip:rect(155px 420px 475px 170px);
margin-left:-170px;
margin-top:-155px;
}
</style>
</head>
<body>
<div style="float:left">原图：<img src="b_1258684795515.jpg" style="vertical-align:top;" /></div>
<div class="box">
clip:<img src="b_1258684795515.jpg" class="img" />
</div>
</body>
</html>
这是我用clip属性裁切的一张图片，有原图和裁切后的图片！~~
浙公网安备 33010602011771号