工作笔记：img的裁剪

来源：互联网发布：office保密软件编辑：程序博客网时间：2024/06/14 02:43

HTML：

<img class="noticeimg-left" src="images/20161118.jpg" alt="新闻图片" width="182">

CSS：

.noticeimg-left{  clip: rect(0px 148px 103px 0px);  position: absolute;}

HTML：

<img class="noticeimg-right" src="images/20161118.jpg" alt="新闻图片">

CSS：

  .noticeimg-right{    clip: rect(0px 579px 80px 0px);    position: absolute;    width: 456px;  }

img只显示图片一部分或 css设置背景图片只显示图片指定区域

background-position: 100% 56%;

设置背景图片显示图片的哪个坐标区域，图片左上角为0，0或0%，0%，右下角为高度和宽度，或100%，100%。

clip:rect(0px 579px 80px 0px); 设置显示图片的某个区域，分别是上右下左的顺序设置。

clip属性说明：

检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为absolute ，此属性方可使用。

clip属性基础语法：
clip : auto 　 rect ( number number number number )

取值：
auto :　默认值。对象无剪切
rect ( number number number number ) :　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切

注意事项:
一、clip属性必须和定位属性postion一起使用才能生效。
二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。
　　

兼容性：现代浏览器都支持

0 0