一、示例

img {
position:absolute;
clip:rect(30px,200px,200px,20px);
}

二、理解

clip 属性剪裁绝对定位元素。

clip:rect矩形剪裁只能作用于position:absolute的元素上

表示的含义就是:最终剪裁的矩形的上边距离原始元素的上边缘30像素;剪裁矩形的右边缘距离原元素左边缘的距离是200像素;剪裁矩形的下边缘距离原元素顶部的距离为200像素;剪裁矩形的左边缘距离原元素左边缘的距离时20像素。

三、浏览器支持

所有主流浏览器都支持 clip 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

四、应用介绍

1. 可用性隐藏
根据上面对top right bottom left的释义,如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性。

例:

clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/
clip: rect(10px 10px 10px 100px); /*left > right*/
clip: rect(100px 10px 10px 10px); /*bottom < top*/

2. img标签下的CSS Sprite定位

3. 图片剪裁的预览效果

原文:http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/

css中clip:rect矩形剪裁功能的更多相关文章

  1. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  2. CSS clip:rect矩形剪裁功能及应用

    .clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...

  3. clip:rect矩形剪裁

    clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...

  4. css :clip rect 正确的使用方法

    CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...

  5. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  6. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  7. CSS中设置元素的圆角矩形

    圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

  8. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  9. CSS元素:clip属性作用说明

    clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...

随机推荐

  1. shell重温---基础篇(printf命令&test命令)

    在shell中还有一个输出的命令,那就是printf了.它模仿的是C程序库(library)里的printf()程序,是由POSIX标准所定义,所以嘞,使用printf脚本比echo移植性要好一点,它 ...

  2. 50道基础的java面试题

    Java程序员面试题集(1-50) 一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象 ...

  3. ora-12154 TNS:"无法处理服务名"的一个解决方法

    http://www.cnblogs.com/xh3/archive/2007/04/21/722217.html 很怪异的一个问题,在网络环境下配置客户端,竟然怎么也连不上主机了,看了不少帖子,大多 ...

  4. 在 Ubuntu 16.04 LTS 上安装 Python 3.6.0

    原文连接:https://segmentfault.com/a/1190000007912666 最近 Python 3 发布了新版本 Python 3.6.0,好像又加入了不少黑魔法!- 由于暂时不 ...

  5. Qt Creater 制作汽车仪表盘

    最近项目用到了模拟仪表,网上下载大神编写的按个仪表Meter没有成功 转战 QWt 编译后,在creater中仍然无法使用,只可以在代码中使用 百度说是我编译的版本不对 扔到 开始做自己的 这个用到了 ...

  6. 接口测试工具postman(一)下载安装说明

    Postman是Google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件. 主要功能包括: 1.模拟各种HTTP requests 从常用的 GET.POS ...

  7. Asp.net core中Migration工具使用的交流分享

    a,ul>li,em{ color:deeppink !important; } h2>a{ text-decoration:none; } ul>li{ padding:3px; ...

  8. Java IO学习--RandomAccessFile

    1.什么是 随机访问文件流 RandomAccessFile 这个类在很多资料上翻译成中文都是:随机访问文件,在中文里,随机是具有不确定的含义,指一会访问这里,一会访问那里的意思.如果以这种语义来解释 ...

  9. CodeForces-455A Boredom

    题目链接 https://vjudge.net/problem/CodeForces-455A 题面 Description Alex doesn't like boredom. That's why ...

  10. 以太坊 生成助记词和infuru插件

    https://iancoleman.io/bip39/ https://infura.io google faucet : https://faucet.rinkeby.io/ 登录google账号 ...