示例图片:width:197px height:87px
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS剪切图片</title>
<style type="text/css">
#img1 {
position:absolute;
clip:rect(30px 80px 60px 20px);
}
</style>
</head>
<body>
示例图片:Width:197px,Height:87px;<br />
<img src="DemoImage.jpg" alt="demo img" />
<hr />
<pre>
<b>使用clip剪切"谷歌"两个字 </b>
语法:
clip:auto|rect( number number number number )
clip:rect(30px 80px 60px 20px);
clip:rect( 上 右 下 左 );
说明:此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。
<img id="img1" src="DemoImage.jpg" alt="demo img" />
<pre/>
</body>
</html>
<html>
<head>
<title>CSS剪切图片</title>
<style type="text/css">
#img1 {
position:absolute;
clip:rect(30px 80px 60px 20px);
}
</style>
</head>
<body>
示例图片:Width:197px,Height:87px;<br />
<img src="DemoImage.jpg" alt="demo img" />
<hr />
<pre>
<b>使用clip剪切"谷歌"两个字 </b>
语法:
clip:auto|rect( number number number number )
clip:rect(30px 80px 60px 20px);
clip:rect( 上 右 下 左 );
说明:此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。
<img id="img1" src="DemoImage.jpg" alt="demo img" />
<pre/>
</body>
</html>