css中clip:rect矩形剪裁功能
一、示例
img {
position:absolute;
clip:rect(30px,200px,200px,20px);
}
二、理解
clip 属性剪裁绝对定位元素。
clip:rect矩形剪裁只能作用于position:absolute
的元素上。
表示的含义就是:最终剪裁的矩形的上边距离原始元素的上边缘30像素;剪裁矩形的右边缘距离原元素左边缘的距离是200像素;剪裁矩形的下边缘距离原元素顶部的距离为200像素;剪裁矩形的左边缘距离原元素左边缘的距离时20像素。
三、浏览器支持
所有主流浏览器都支持 clip 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
四、应用介绍
1. 可用性隐藏
根据上面对top right bottom left
的释义,如果left >= right
或者bottom <= top
,则元素会被完全裁掉而不可见,即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性。
例:
clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/
clip: rect(10px 10px 10px 100px); /*left > right*/
clip: rect(100px 10px 10px 10px); /*bottom < top*/
2. img标签下的CSS Sprite定位
3. 图片剪裁的预览效果
原文:http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/
css中clip:rect矩形剪裁功能的更多相关文章
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- CSS clip:rect矩形剪裁功能及应用
.clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...
- clip:rect矩形剪裁
clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...
- css :clip rect 正确的使用方法
CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...
- CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- CSS中设置元素的圆角矩形
圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS元素:clip属性作用说明
clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...
随机推荐
- shell重温---基础篇(printf命令&test命令)
在shell中还有一个输出的命令,那就是printf了.它模仿的是C程序库(library)里的printf()程序,是由POSIX标准所定义,所以嘞,使用printf脚本比echo移植性要好一点,它 ...
- 50道基础的java面试题
Java程序员面试题集(1-50) 一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象 ...
- ora-12154 TNS:"无法处理服务名"的一个解决方法
http://www.cnblogs.com/xh3/archive/2007/04/21/722217.html 很怪异的一个问题,在网络环境下配置客户端,竟然怎么也连不上主机了,看了不少帖子,大多 ...
- 在 Ubuntu 16.04 LTS 上安装 Python 3.6.0
原文连接:https://segmentfault.com/a/1190000007912666 最近 Python 3 发布了新版本 Python 3.6.0,好像又加入了不少黑魔法!- 由于暂时不 ...
- Qt Creater 制作汽车仪表盘
最近项目用到了模拟仪表,网上下载大神编写的按个仪表Meter没有成功 转战 QWt 编译后,在creater中仍然无法使用,只可以在代码中使用 百度说是我编译的版本不对 扔到 开始做自己的 这个用到了 ...
- 接口测试工具postman(一)下载安装说明
Postman是Google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件. 主要功能包括: 1.模拟各种HTTP requests 从常用的 GET.POS ...
- Asp.net core中Migration工具使用的交流分享
a,ul>li,em{ color:deeppink !important; } h2>a{ text-decoration:none; } ul>li{ padding:3px; ...
- Java IO学习--RandomAccessFile
1.什么是 随机访问文件流 RandomAccessFile 这个类在很多资料上翻译成中文都是:随机访问文件,在中文里,随机是具有不确定的含义,指一会访问这里,一会访问那里的意思.如果以这种语义来解释 ...
- CodeForces-455A Boredom
题目链接 https://vjudge.net/problem/CodeForces-455A 题面 Description Alex doesn't like boredom. That's why ...
- 以太坊 生成助记词和infuru插件
https://iancoleman.io/bip39/ https://infura.io google faucet : https://faucet.rinkeby.io/ 登录google账号 ...