.clip{

position:absolute;

clip: rect(10px 30px 20px 10px);

}

最后有必要说明下：clip:rect矩形剪裁只能作用于position:absolute的元素上。

可用性隐藏

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

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矩形剪裁功能

    一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...

  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 clip样式 属性功能及作用

    clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...

  6. [TimLinux] CSS 纯CSS实现动画展开/收起功能

    内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...

  7. [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果

      语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...

  8. asp.net mvc上传头像加剪裁功能介绍

    正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...

  9. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

随机推荐

  1. Cannot invoke Tomcat manager: socket write error

    一开始, 参照 http://www.cnblogs.com/yezhenhan/archive/2012/07/17/2594684.html mvn tomcat:redeploy 出现: Can ...

  2. django之ModelBase类及mezzanine的page link类

    class ModelBase(type): """ Metaclass for all models. """ def __new__(c ...

  3. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. leetcode1009

    class Solution: def bitwiseComplement(self, N: int) -> int: if N==0: return 1 elif N==1: return 0 ...

  5. springboot 端口号

    1. 读取端口号 2.多端口运行 2.

  6. 创建pod步骤

    创建pod步骤 Steps: pod lib create YBUtils  //创建基本目录结构及工程 pod lib lint YBUtils.podspec //验证podspec文件是否合法 ...

  7. Vue router 的使用--初级

    在说 VueRouter 之前,首先要弄明白vueRouter 是干什么的,有什么用 说出来其实很简单,就是一个模板替换的问题,当路由改变的时候,把和路由相关的模板显示出来,就是这么简单.但是,当我们 ...

  8. ReactiveX 学习笔记（15）使用 Rx.NET + Json.NET 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  9. 如何遍历Map对象

    方法一 通过Map.entrySet遍历key和value,在for-each循环中使用entries来遍历.推荐,尤其是容量大时 这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使 ...

  10. Hibernate学习笔记2.2（Hibernate基础Annotation配置）

    如果数据库表名与类名不一致 可以用使用 @Table(name="_teacher") 来指定表名,没有就会自己创建 也可以在配置文件上修改 为class添加table属性 如果什 ...