.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. yarn application -kill application_id yarn kill 超时任务脚本

    需求:kill 掉yarn上超时的任务,实现不同队列不同超时时间的kill机制,并带有任务名的白名单功能 此为python脚本,可配置crontab使用 # _*_ coding=utf-8 _*_ ...

  2. 使用windows性能计数器监控cpu使用率

    https://blog.csdn.net/yabingshi_tech/article/details/26672355 2. http://blog.51cto.com/qixue/1702557 ...

  3. spark 实现TOP N

    数据量较少的情况下: scala> numrdd.sortBy(x=>x,false).take(3) res17: Array[Int] = Array(100, 99, 98) sca ...

  4. 天天向上的力量 III(python在pycharm实现)

    '''描述一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值相差多少呢?其中,N的取值范 ...

  5. linux驱动开发第一步hello

    先查看Ubuntu的版本 cat /etc/issue lin@lin-virtual-machine:~$ cat /etc/issue Ubuntu 12.04 LTS \n \l 或者使用 li ...

  6. mac 管理员权限变成了普通权限处理方法

    在更换账户名称的时候出了这个问题.设置的时候不会显示用户名,没有电脑的管理权限了,找到如下方法解决的,试了可行. http://blog.csdn.net/vickylizy/article/deta ...

  7. Dubbo 消费者

    1. pom <dependency> <groupId>com.alibaba</groupId> <artifactId>dubbo</art ...

  8. day13-文件操作

    1.打开与关闭 1.1.open() close()我们使用 open() 函数打开文件.这个函数将返回一个文件对象,我们对文件的读写都将使用这个对象.open() 函数需要三个参数,第一个参数是文件 ...

  9. [AS3]as3中splice和slice的用法介绍说明

    splice 删除数组一段连续的元素,返回被删除的元素数组 var arr:Array = ["a","b","c","d&quo ...

  10. WebAssembly相关

    git搜索:https://github.com/search?q=WebAssembly 相关demo:https://github.com/jpmorganchase/perspective we ...