使用CSS“Clip”属性裁剪图片

<Category: 前端设计> 查看评论

这是一个非常实用的CSS属性,且IE6也支持!用于缩放成不同比例的小图片时非常简单,而不需要多余的<div></div>做为容器来装载图片

clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素:你必须指position:absolute。然后,指定top rightbottom left值相对于元素的距离。

图片裁剪实例

下面的示例演示如何使用clip属性。首先,指定<div>position:relative下一步,指定<img>position:absolute

demo

1
2
3
4
5
6
7
8
9
10
.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.

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
}

原文:http://www.sonichtml.com/blog/?p=977

本文来自: 使用CSS“Clip”属性裁剪图片

您或许也会喜欢:

  • 时尚的CSS3进度条(0)
  • 40款非常漂亮的 HTML5 & CSS3 免费网站模板【下篇】(0)
  • Chosen:Select选择框的华丽变身(0)
  • 圆角头像的重构优化(0)
  • CSS两列流式布局(0)
  • CSS浮动面面观(0)
  • 27个使用纯 CSS 实现的图片画廊 (0)
  • CSS自定义滚动条样式(0)
  • CSS 边框重叠鼠标悬停效果(0)
  • 泛泛而谈界面中的斑马纹设计(0)
    1. 百度搜索开放平台是一个基于百度网页搜索的开放的数据分享平台,广大站长和开发者,
      可以直接提交结构化的数据到百度搜索引擎中,实现更强大、更丰富的应用,使用户获得更好
      的搜索体验,并获得更多有价值的流量。

      骨头软件工作室提供内容发送.