CSS clip:rect矩形剪裁功能
CSS中有一个属性叫做clip
,为修剪,剪裁之意。配合其属性关键字rect
可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height
/display:table-cell
等浏览器的兼容性问题。
根据Dreamweaver的自动提示,clip
有如下可用属性关键字:
就顺序上而言,top → right → bottom → left
,在CSS中是统一相承的,就像是margin的四个值的顺序,border-width等等的四个值顺序——从头顶上开始,顺时针旋转的说~~不过这里的四个值是不可以缩写的。
其中top right bottom left
表示各个位置的属性值,就像是width:200px;
中的200px
,所以,我们会有类似下面的使用:
rect(30px 200px 200px 20px)
那这里的top right bottom left
究竟指什么的?我们该如何理解呢?
其实是这样的,top right bottom left
分别指最终剪裁可见区域的上边,右边,下边与左边。而所有的数值都表示位置,且是相对于原始元素的左上角而言的。于是
rect(30px 200px 200px 20px)
表示的含义就是:最终剪裁的矩形的上边距离原始元素的上边缘30像素;剪裁矩形的右边缘距离原元素左边缘的距离是200像素;剪裁矩形的下边缘距离原元素顶部的距离为200像素;剪裁矩形的左边缘距离原元素左边缘的距离时20像素。
上面的表述又长有啰嗦又难以理解,你可以这样想象:饥饿N天的你突然面前出现了块香喷喷的大大的300厘米*300厘米方形手抓饼,你拔出自己随着携带的锋利的日本刀,在距离顶部30厘米的地方咔嚓一刀,然后在距离左边200厘米的地方咔嚓一刀,然后又以迅雷不及掩耳的速度在距离顶部200厘米和距离20厘米的地方咔嚓一刀。啪啪四刀留下的中间的那块就是剪裁的内容了。所以,您可以将top right bottom left
理解为在这些位置拿大刀咔咔修剪。
或者理解为在photoshop中为大背景建四个方向的参考线,如下图(300像素*300像素)所示:
所谓“一图胜千言,千言不敌一实例”。为了更加直观的理解clip:rect
后面四个值的含义,我专门做了个demo页面。您可以狠狠地点击这里:CSS clip:rect几个值含义示意demo
在demo页面中,我已经将4个值分离出来了,您任意修改其中的一个值,页面上就会出现半透明的黑色层示意这部分内容是将会被剪裁掉的。例如,我们修改第一个值为30,如下图:
失去焦点后就会看到图片上出现了改值对应的剪裁作用区域:
类似的,我们修改各个框框的值为30 200 200 20
,这时,图片上的效果就是:
其中图片中未被黑色半透明层覆盖的区域就是最后的剪裁区域,您可以点击下面的“剪裁”按钮确认剪裁,结果就如下图所示:
您也可以修改其他值做测试的。如果最后图片全部被半透明层覆盖,那么图片最后会被剪裁到一点不剩。
最后有必要说明下:clip:rect矩形剪裁只能作用于position:absolute
的元素上。
三、clip:rect矩形剪裁的一些应用介绍
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*/
等,正所谓小手抖一抖,剪裁有木有。//zxx:上面几个值的效果您可以去part2部分所提供的demo页面做测试滴。
2. img标签下的CSS Sprite定位
为了节约图片资源,我们经常会把小图片整合到一张图片上,称为图片合并技术,国外称为CSS Sprite,含“精灵”之意。然后利用元素区域外background
内容不可见的特性配合background-position
定位实现图片的精确显示。
就连万万不能没有的钱都不是万能的,显然,background-position
下的CSS Sprite定位也不可能适用于各种情况。例如,有时我们希望Sprite图片可以延迟滚动加载,或者是可以很轻松的右键图片另存为...或者是某些特殊的background-position
属性不起作用的情况。
例如,众所周知的,IE6浏览器不支持Alpha透明通道的png图片(会有蓝蓝的背景),例如下图所示:
我们可以使用filter滤镜修复这一问题。然而,如果该png图片以background-image的形式滤镜透明化的话是不支持background-position
定位的,也就是,我们不可能在IE6下使用background属性实现png图片的Sprite定位。此时,要想实现IE6下png图片的Sprite定位只能在页面上完成,使用img标签,而非background-image
属性。
然后,img标签下的图片是不会像background-image
一样元素区域外部分自动隐藏,所以,我们需要借助某些手段对齐进行裁剪,此时clip:rect
就派上用场了。
您可以狠狠地点击这里:clip:rect下png图片Sprite定位demo
demo页面中的沙发png图片完整显示如下:
如果您手头上的浏览器为IE6浏览器,则打开demo页面会看到如下效果:
可以看到鼠标移上去后是有Sprite定位切换实现的hover效果:
可以看到为应用透明滤镜的情况下,使用img
标签配合clip:rect
轻松实现了Sprite图片的hover切换效果。这在background属性中也能实现,OK,现在点击下面的“IE6 png透明按钮”,应用AlphaImageLoader
透明滤镜,然后再鼠标经过,结果也是可以实现hover效果的,见下图:
CSS代码如下:
.clip_a{display:block; width:128px; height:128px;} .clip_a img{border:0; position:absolute; clip:rect(0 128px 128px 0);} .clip_a:hover{border:0;} .clip_a:hover img{margin-top:-128px; clip:rect(128px 128px 256px 0);}
由此可见,CSS Sprite的定位不仅仅可以使用background
属性,在页面上使用img
标签,配合clip:rect
剪裁也是可以轻松实现定位效果的。
3. 图片剪裁的预览效果
关于图像剪裁,很早前我曾翻译过一个名为Jcrop的jQuery插件,文章名为“jQuery照片图像剪裁插件Jcrop中文翻译详解”,其中有个demo是含有剪裁预览效果的,您可以轻轻地点击这里访问。
里面的剪裁预览采用margin定位,有着较为复杂的计算。
实际上,像剪裁预览效果显示用剪裁属性来实现是最合适的了。于是,自己利用自己先前写的原生态的“图片旋转+剪裁js插件”中的zxx.crop_rotation.js写了个图片剪裁预览效果demo。
您可以狠狠地点击这里:clip:rect图片剪裁效果demo
demo页面中的旋转可以直接当空气,移动,拖动示意区域,就会在右侧看到对应的剪裁预览效果:
CSS clip:rect矩形剪裁功能相关推荐
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- css 剪辑图片_CSS clip:rect 矩形剪裁功能,截取图片某一块
CSS clip:rect 矩形剪裁功能,截取图片某一块 2016-12-14 10:43 4715 最近我在制作一款主题的时候,在自适应css设计中,为了调整图片大小,又不愿意改变图片比例的情况下, ...
- css中clip:rect用法
css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果. top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的 ...
- css环形进度条clip,使用CSS clip 属性实现音频播放圆环进度条
这是效果 突然有需求要做一个圆环的音频播放进度条(上图效果),自己琢磨尝试了半天,也没有实现.最后度娘一下,才知道css还有一个clip属性,完美实现需求.分享一下,说不定能帮其它小伙伴.至于有没有用 ...
- 将CSS CLIP属性应用在:扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示 我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加 ...
- OpenCV的Rect矩形类简介和使用
OpenCV的Rect矩形类用法 摘自 https://blog.csdn.net/kh1445291129/article/details/51149849 //如果创建一个Rect对象rect(1 ...
- ios 裁剪框大小_iOS实现裁剪框和图片剪裁功能
这篇文章主要为大家详细介绍了iOS实现裁剪框和图片剪裁功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,今天实现 ...
- php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业
CSS绝对定位实现窗口遮罩功能: 这是HTML代码部分 实例 html> 绝对定位之遮罩 用户登录窗口 用户名: 密码: 登录 运行实例 » 点击 "运行实例" 按钮查看在线 ...
- [css] 如何实现换肤功能?
[css] 如何实现换肤功能? css 换肤常见方案 是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...
最新文章
- ensp删除静态路由命令_eNSP配置静态路由
- tomcat开启SSL8443端口的方法
- wxWidgets 的打印演示
- 机器学习线性回归学习心得_机器学习中的线性回归
- Bootstrap响应式测试用例
- Access SqLDbHelper
- 极酷WIFI深度剖析免费WIFI
- inDesign入门教程,如何对齐和分组内容?
- 最全的Vue3.0新特性预览(翻译)
- Photoshop水平线快捷键怎么使用的?
- mp3转wav方法,mp3转wav步骤
- Win10 Pro自己解决系列~~~~菇凉手动折腾~~丰衣足食
- Heka nginx input
- QDockWidget增加边框
- ubuntu 安装eclipes
- php 常用组件,PHP 程序员应该使用的10个组件
- 干货秘籍:网易游戏《率土之滨》原画设计师分享创作设计经验
- 谷歌高质量外链怎么做?Google网站买英文外链可行吗?
- Cheat Sheet的意思
- 最新数据挖掘赛事方案梳理!
热门文章
- CF思维联系– CodeForces - 991C Candies(二分)
- 曼哈顿距离最小生成树
- ACM-ICPC 2019 山东省省赛 C Wandering Robot
- 用Microwindows(Nano-X)编写“hello world”
- 如何使用 git 更新branch到master最新状态
- 【目标检测】ATSS: bridging the gap between anchor-based and anchor-free detection via ATSS (cvpr20)
- 神经网络 梯度下降_梯度下降优化器对神经网络训练的影响
- Linux进程调度策略分析
- 工商银行信用卡如何通过刷星提额?
- android静默卸载,Android实践 -- Android静默安装和卸载