clip 属性用来设置元素的形状。用来剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时，"clip" 属性允许规定一个元素的可见尺寸，这样此元素就会被修剪并显示在这个元素中。

用这个属性需要注意以下三点：

1.clip属性只能用于绝对定位元素，position:absolute或fixed。

2.clip属性有三种取值：auto  默认的

　　　　　　　　　　  inherit继承父级的

　　　　　　　　　　一个定义好的形状，但现在只能是方形的 rect()

　　clip: { shape | auto | inherit } ;

3.shape   rect(<top>, <right>, <bottom>, <left>)中的四个元素不可省略。

下面看下clip属性的rect()函数

clip: rect(<top>, <right>, <bottom>, <left>);

具体四个数值表示什么呢？看两张图即可理解。

简单的理解就是：图片飞高就是bottom-top,宽就是right-left.当然图片不会是负数。

clip属性对于多数浏览器都可以用，写法会有点不同

.my-element {

    position: absolute;
    clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
    clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}

下面写一实例

<!doctype html>

<html>

	<head>

		<meta http-equiv="Content-type" content="text/html charset=utf-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

		<title>clip</title>

		<style type="text/css">

			img {

				position:absolute;

				top:0;

				left:10px;

				clip: rect(52px, 280px, 290px, 95px);

			}

		</style>

	</head>

	<body>

		<img src="00.jpg"/>

	</body>

</html>

　　原图和页面显示图片如下

（原图）

（页面显示）

参考资料：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

css3中clip属性的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  5. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  6. css3中content属性的应用

    可以使用css3中content功能为html元素增减内容.content需要配合 E:before和E:after使用. 废话少说,看代码和效果说明: 第一种: css代码: #div1:befor ...

  7. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  8. css3中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  9. 谈谈CSS3中display属性的Flex布局（弹性布局）

    最近为了微信小程序,回忆起之前有接触过的弹性布局(display:Flex) 网上摘录的原文地址:https://www.cnblogs.com/xuyuntao/articles/6391728.h ...

随机推荐

  1. 窗口移动--基类(BaseForm)

    #region 窗口移动 private bool _isLeftButtonDown = false; public const int HTCAPTION = 0x0002; protected ...

  2. .Net(C#)Parallel"循环"的解释以及与循环的比较

    Parallel 类提供对并行循环和区域的支持. 许多个人计算机和工作站都有两个或四个内核(即 CPU),使多个线程能够同时执行. 在不久的将来,计算机预期会有更多的内核. 为了利用当今和未来的硬件, ...

  3. CodeForces 259A Little Elephant and Chess

     Little Elephant and Chess Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d &am ...

  4. java传递和返回对象

    java传递的只是一个引用,一定要注意准确认识在对象传递和赋值时所发生的一切. 事实上,java中的每个对象(除了基本数据类型以外)的标识符都属于指针的一种,但是其使用受到了严格的限制和防范,不仅在编 ...

  5. python_way ,day5 模块，模块3 ，双层装饰器，字符串格式化，生成器，递归，模块倒入，第三方模块倒入，序列化反序列化，日志处理

    python_way.day5 1.模块3 time,datetime, json,pickle 2.双层装饰器 3.字符串格式化 4.生成器 5.递归 6.模块倒入 7.第三方模块倒入 8.序列化反 ...

  6. 【T-SQL系列】临时表、表变量

    临时表临时表与永久表相似,只是它的创建是在Tempdb中,它只有在一个数据库连接结束后或者由SQL命令DROP掉,才会消失,否则就会一直存在.临时表在创建的时候都会产生SQL Server的系统日志, ...

  7. Linux下C程序的编译，运行，及调试

    先查看linux有没有gcc 和 gdb $ gcc -v $ gdb -v 如果没有安装gcc,可以 $ yum install gcc 要获取管理员权限才能安装软件,$ su root (有的li ...

  8. XP_版本

    1. Windows XP sp3 cd 和Windows XP sp3 cd vl的区别?VL的意思是大客户版,就是使用VL的KEY安装的系统是不需要激活的,不带VL的是安装完后需要激活的零售版 2 ...

  9. V8 引擎的sort算法

    用的是快速排序,有点小问题 function ArraySort(comparefn) { // In-place QuickSort algorithm. // For short (length ...

  10. CentOS6.x最下化安装及优化配置

    一.最小化安装自定义额外包组 1.1 选择最小化安装 1.2 自定义额外的包组 Base System的选择 Development的选择 如果需要中文的支持可以在Languages中勾选中文 1.3 ...