.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. java 权重随机算法实现

    import java.util.*; /** * 权重随机算法实现 * a b c d 对应权重范围 --- [0,1).[1,3).[3,6).[6,10) */ public class Ran ...

  2. 域控场景下windows安全日志的分析--审计认证行为和命令的历史记录

    https://www.cnblogs.com/KevinGeorge/p/8563458.html 一.域控windows安全日志基本操作 1.打开powershell或者cmd 1 #gpedit ...

  3. 微信支付开发出现redirect_uri参数错误的解决方法

    我们在进行微信支付开发的时候会遇到出现“redirect_uri参数错误”这种情况,怎么办呢?下面就是我总结出现这种“redirect_uri参数错误”的七种可能情况,以及解决方式. 1.可能原因①: ...

  4. Android自定义View学习(二)

    绘制顺序 参考:HenCoder Android 开发进阶:自定义 View 1-5 绘制顺序 绘制过程 包括 背景 主体(onDraw()) 子 View(dispatchDraw()) 滑动边缘渐 ...

  5. VS2017创建一个 ASP.NET Core2.0 应用,并搭建 MVC 框架

    https://testerhome.com/topics/11747 1.使用最新版本的VS2017,并安装.NET Core2.0中相关开发工具   2.打开VS2017,点击文件-新建-项目,选 ...

  6. springboot 端口号

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

  7. 机器学习进阶-案例实战-图像全景拼接-书籍SIFT特征点连接 1.cv2.drawMatches(对两个图像的关键点进行连线操作)

    1.cv2.drawMatches(imageA, kpsA, imageB, kpsB, matches[:10], None, flags=2)  # 对两个图像关键点进行连线操作 参数说明:im ...

  8. as2 shareObject本地缓存存储位置:

    shareObject本地缓存存储位置: win7系统用户到C:\Users\[你的用户名]\AppData\Roaming\Macromedia\Flash Player\#SharedObject ...

  9. APP-3-百度地图应用

    1.百度地图开发平台 http://lbsyun.baidu.com/ 1.1申请账号 1.2Android创建应用 进入百度地图开发平台->控制台->创建应用 发布版SHA1:BA:AD ...

  10. ISPF常用命令

    [ISPF功能键] PF1: HELP帮助键 PF2: SPLIT键,改变分屏位置 PF3: END键,结束并退回上级菜单 PF4: RETURN键,结束并退回主菜单 PF5: REFIND键,重复最 ...