使用CSS“Clip”属性裁剪图片
2010-09-06 11:49
295 查看
这是一个非常实用的CSS属性,且IE6也支持!用于缩放成不同比例的小图片时非常简单,而不需要多余的<div></div>做为容器来装载图片
clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素:你必须指position:absolute。然后,指定top rightbottom left值相对于元素的距离。
图片裁剪实例 下面的示例演示如何使用clip属性。首先,指定<div>position:relative下一步,指定<img>position:absolute
调整并剪辑图像
把图像缩小50%并剪辑成图形。用的width和height属性来调整图像和clip属性。并把图像向左偏移15px.
Popularity: unranked
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; }
Popularity: unranked
相关文章推荐
- CSS裁剪属性clip使用的实例教程
- apiCloud中图片裁剪模块FNImageClip的使用
- CSS图片裁剪Clip
- html/css学习零星笔记(二)——使用usemap属性创建图片映射
- css快速剪切图片的方法和clip属性介绍
- 使用CSS里的user-select属性控制用户在页面上选中的内容
- css中background属性引入图片url()中地址问题
- 如何从一张图片中裁剪一部分距形图片另存为文件(使用Canvas.CopyRect)
- css使用overflow属性控制滚动条的样式
- CSS 6.1 定位补充-详细讲解Clip属性(转载)
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
- 【译】如何使用Android MediaStore裁剪大图片
- hibernate3与ehcache-2.8.3配合使用,在多个SessionFactory实例的情况下出现“Another unnamed CacheManager already exists in the same VM”问题
- Android裁剪图片(UCrop)使用说明
- 使用js操作css实现js改变背景图片示例
- CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能【转】
- CSS下背景属性background的使用方法
- vue 裁剪图片,插件Cropper的使用
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- HTML 无序列表项目符号使用图片的CSS写法