最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

使用CSS”Clip”属性对图片进行裁剪

CSS3 有客 1717浏览 0评论

这是一个非常实用的CSS属性,且IE6也支持!用于缩放成不同比例的小图片时非常简单,而不需要多余的<Div></Div>做为容器来装载图片
Clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素:你必须指Position:absolute。然后,指定Top Rightbottom Left值相对于元素的距离。

图片裁剪实例
下面的示例演示如何使用Clip属性。首先,指定<Div>Position:relative下一步,指定<Img>Position:absolute


.clip {
position: relative;
height:
130px;
width:
200px;
border: solid 1px #ccc;}.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);}


调整并剪辑图像
把图像缩小50%并剪辑成图形。用的Width和Height属性来调整图像和Clip属性。并把图像向左偏移15px.


.gallery li {
float: left;
margin:
0
10px 0
0;
position: relative;
width:
70px;
height:
70px;
border: solid 1px #000;}.gallery img {
width:
100px;
height:
70px;
position: absolute;
clip: rect(0
85px 70px 15px);
left:15px;}

本文转载自《快乐飞扬博客》

转载请注明:有客帮 » 使用CSS”Clip”属性对图片进行裁剪

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址