.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. <转载> MySQL 架构 http://www.cnblogs.com/winner-0715/p/6863802.html

    1.MySQL整体逻辑架构 我们先下图看看MySQL整体逻辑架构(MySQL’s Logical Architecture) 图1 第一层,即最上一层,所包含的服务并不是MySQL所独有的技术.它们都 ...

  2. ASP.NET Core MVC 概述

    https://docs.microsoft.com/zh-cn/aspnet/core/mvc/overview?view=aspnetcore-2.2 ASP.NET Core MVC 概述 20 ...

  3. 一次ssh远程不能登录的排查

    原创文件,欢迎阅读,禁止转载. 今天发现一台主机不能远程了,ssh连接不上了. 排查过程是这样的:1. ping没问题. 2. 通过telnet看端口是否开启.[user@localhost ~]$ ...

  4. golang判断文件/文件夹是否存在

    使用os包,os.stat返回err==nil,说明存在: os.IsNotExist(err)为true,说明不存在:否则不确定是否存在 func DelJar(fileName string) e ...

  5. png 2 icon

    http://www.easyicon.net/covert/ 这个网页可以转换png图片为icon格式

  6. tp5增删改查

    tp5框架增删改查,相对于以前的源生代码而言,非常简单,主要是为了熟练的应用框架,下面的代码主要是tp5框架的增删改查,让我们的更好 掌握框架. <?php namespace app\inde ...

  7. 笨方法学python 22,前期知识点总结

    对笨方法学python,前22讲自己的模糊的单词.函数进行梳理总结如下: 单词.函数 含义 print() 打印内容到屏幕 IDLE 是一个纯Python下自带的简洁的集成开发环境 variable ...

  8. 使用CLR Function代替T-SQL函数,优化检索效率

    前言: 在使用存储过程查询数据中,T-SQL字符串拆分函数效率低下,这个时候我们可以采用CLR Function代替T-SQL函数,使用DLL执行字符串分解过程,并返回值到SQL中.测试复杂运行的速度 ...

  9. 尚硅谷springboot学习8-yaml基本语法

    1.基本语法 k:(空格)v:表示一对键值对(空格必须有): 以空格的缩进来控制层级关系:只要是左对齐的一列数据,都是同一个层级的 server: port: 8081 path: /hello 属性 ...

  10. haproxy + nginx + proxy protocol 获得客户真实IP方法

    公司网站架构为: 前面2台HA负载均衡,后面3台Nginx负载均衡反向代理,然后后面有N台WEB服务器 由于要统计IP,需要在WEB服务器日志里体现客户端真实IP 那么问题来了,通过HA代理的HTTP ...