效果:
图片的上部裁剪了120px,下部裁剪了125px,左边裁剪了170px,右边裁剪了200px。
点击观看“原图片”裁剪了图片的地方,可以放置其它内容。呵呵!你看看,这两边不是放置了文字了吗!上面我再放置一个文章的标题,再放置两个小图片。
用代码裁剪图片
“春天没来”编撰
2013年9月14日于北京
代码:
<table style="left: 0px; top: 0px; width: 750px; height: 1125px; position: relative;" id="table1" border="0" cellSpacing="0" cellPadding="0" background="
http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg">
<tbody>
<tr>
<td>
<img style="left: 0px; top: 0px; position: absolute; cliptop: 120px; clipright: 550px; clipbottom: 1100px; clipleft: 170px;" alt="" src="
http://image63.360doc.com/DownloadImg/2013/08/0606/34298948_1.jpg">
</td></tr></tbody></table>
代码简析:css的clip 属性:剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。
clip 属性:用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。
auto:默认值。不应用任何剪裁。
设置元素的形状。唯一合法的形状值是:rect (top, right, bottom, left) inherit:规定应该从父元素继承 clip 属性的值。JavaScript 语法:object.style.clip="rect(0px,50px,50px,0px)"
应用注释:cliptop: 200px; 指裁剪图片的上部200px;clipright: 650px; 指图片从左向右显示650px;clipbottom: 553px; 指图片从上向下显示553px;clipleft: 200px;指裁剪图片的左部200px。
要裁剪图片的上部,应用cliptop: 200px,属值自由定;要裁剪图片的左部,应用clipleft: 200px,属值自由定;要裁剪图片的下部,应用clipbottom: 553px,属值比图片的高度小多少px就会裁剪多少px ;要裁剪图片的右部,应用clipright: 200px,属值比图片的宽度小多少px就会裁剪多少px 。
“春天没来”编撰
2013年9月14日于北京
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。