CSS clip:rect矩形剪裁功能及应用
.clip{
position:absolute;
clip: rect(10px 30px 20px 10px);
}
最后有必要说明下:clip:rect矩形剪裁只能作用于position:absolute的元素上。
可用性隐藏
根据上面对top right bottom left的释义,如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性。
CSS clip:rect矩形剪裁功能及应用的更多相关文章
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- css中clip:rect矩形剪裁功能
一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...
- clip:rect矩形剪裁
clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...
- css :clip rect 正确的使用方法
CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...
- css clip样式 属性功能及作用
clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...
- [TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...
- [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果
语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...
- asp.net mvc上传头像加剪裁功能介绍
正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...
- CSS Clip剪切元素动画实例
1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...
随机推荐
- RDD中的cache() persist() checkpoint()
cache只有一个默认的缓存级别MEMORY_ONLY ,而persist可以根据StorageLevel设置其它的缓存级别. cache以及persist都不是action. 被重复使用的(但是)不 ...
- Flex NumberFormatter 数值的格式化
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- jieba安装
执行“pip install jieba”后忽略此条提示" You are using pip version 9.0.3, however version 10.0.1 is availa ...
- scrapy工作原理探秘
def _next_request_from_scheduler(self, spider):#engine从调度器取得下一个request slot = self.slot request = sl ...
- PHP轻量级框架 Slim 使用(一)
安装参照文档:https://wizardforcel.gitbooks.io/slim3-doc/content/1.html 项目目录 其中主要业务操作在app目录中完成,可根据需求划分 我这里分 ...
- selenium报错
Python 2.7.15 selenium 2.53.6 Firefox 47.0.1 pycharm 2017.3.7 # coding:utf-8 from selenium import ...
- BBS-文章详情页、点赞功能
文章详情页--布局中header和左边区域不变--用到继承 home_site和article_detail只是布局 中心区域 只是右侧不同-----用到继承原理 -------- url # 文章详 ...
- ABAP-JSON数据格式互转
*&---------------------------------------------------------------------* *& Report ZRICO_TES ...
- jquery事件绑定与事件委托
//事件绑定简写形式 $(".div2 button").click(function () { $(".div1").scrollTop(0) }) //写全 ...
- Python 百分号字符串拼接
# %s可以接收一切 %d只能接收数字 msg = 'i am %s my hobby is %s' %('lhf','alex') print msg msg2 = 'i am %s my hobb ...