.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. linux常用命令以及快捷键

    find命令查找某些文件并将其拷贝到指定目录 [root@host lib]# find -name "*hbase*.jar" |xargs -i cp {}  /root/aa ...

  2. Jmeter性能测试基础

    压力测试   压力测试分两种场景:一种是单场景,压一个接口的:第二种是混合场景,多个有关联的接口.压测时间,一般场景都运行10-15分钟.如果是疲劳测试,可以压一天或一周,根据实际情况来定. 压测任务 ...

  3. Android Camera开发:周期性循环自动聚焦auto focus挂掉原因分析(preview is not enabled)

    参考:Android Camera开发:扫描二维码,周期性循环自动聚焦auto focus挂掉原因分析(preview is not enabled) 最近做Android人脸识别时,camera在自 ...

  4. sql中有一些保留字,当你的字段名是它的保留字时,这个时候sql语句的字段不加``就会报错

    sql中有一些保留字,当你的字段名是它的保留字时,这个时候sql语句的字段不加``就会报错

  5. django for 循环中,获取序号

    模板的for循环中,如何获取序号? 想过用enumerate,但是在模板中会报错 Could not parse the remainder xxx: 后来搜到 forloop.counter,完美解 ...

  6. FDQuery 怎么能插入NULL参数

    [FireDAC][Phys][MSSQL]-335. Parameter [fieldAA] data type is unknown. Hint: specify TFDParam.DataTyp ...

  7. Java读写hdfs上的avro文件

    1.通过Java往hdfs写avro文件 import java.io.File; import java.io.IOException; import java.io.OutputStream; i ...

  8. numpy.distutils.system_info.NotFoundError: no lapack/blas resources found问题解决

    操作环境 Python3.6 + Windows7 问题现象   利用pip自动安装seaborn/numpy/scipy(pip install seaborn)模块失败,提示numpy.distu ...

  9. vscode 右击文件||文件夹添加快捷方式

    操作注册表步骤 1.按下win+R 2.输入redegit,打开注册表 3.找到HKEY_CLASSES_ROOT/*/shell路径 4.新建/项:命名Open with visual code 5 ...

  10. 24 week 4 安装 docker

    安装docker 出现问题 解决办法https://blog.csdn.net/VOlsenBerg/article/details/70140211 发现链接超时,然后就https://blog.c ...