css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块

CSS clip:rect 矩形剪裁功能，截取图片某一块

2016-12-14 10:43

4715

最近我在制作一款主题的时候，在自适应css设计中，为了调整图片大小，又不愿意改变图片比例的情况下，用到了CSS剪裁功能。

说实话，这个功能在国内运用的比较少。CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似大家很少使用此属性。我总结了三点原因：首先是理解上有些门槛；二是其他人使用的不多；三是此属性功能效果有不少替代方案。

我们使用overflow可以实现块内容的剪裁，而图片剪裁我们却很少用到。我们往往是将图片进行等比例缩小。所以很少用到clip剪裁。但是等比例缩小问题来了，他很可能不能将图片缩小为我们想要的尺寸。那么用clip属性就省事不少。

相关CSS代码如下：

.hidden{

position:absolute;

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

}

其中方向含义为rect(top right bottom left)，就顺序上而言，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像素。如下图(300像素*300像素)所示：

这样就不难理解了。但是在实际使用过程中可能与我们想向中的不符。那么就需要不断的改变其四个值去进行尝试。其实我在使用margin和padding属性的时候就经常改变四个值进行微调。

当然，这个属性比较糟心的前提是，图片需要在绝对定位之下才能使用，且使用后可能会改变图片位置。这时候就需要用left right margin-left:-xx margin-right:-xx来调节位置了。当然也可以设置其父元素为绝对定位。而且父元素使用clip对子元素同样有效。如下Html：

我们可以这样写css：

#123{

position:absolute;

clip: rect(1px 1px 1px 1px);

}

好了，此文到此结束，大家不妨试试~

css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块相关推荐

CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
CSS clip:rect矩形剪裁功能
CSS中有一个属性叫做clip,为修剪,剪裁之意.配合其属性关键字rect可以实现元素的矩形裁剪效果.此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display ...
WordPress主题美女图片整站源码多功能CX-UDY图片主题（带会员积分系统）
源码下载地址:https://zy.prmath.com/252.html 这是一套带有CX-UDY图片主题的WordPress网站源码,页面设计美观大方,功能强大:会员积分系统+SEO优化+第三方登 ...
iosxib 设置图片_iOS使用xcode可视化图像编辑功能进行图片拉伸
iOS中可视化拉伸图片技巧一.补充在我的另一篇博客http://my.oschina.net/u/2340880/blog/403996中探讨了IOS拉伸图像(UIImage)的几种方法和一些小经 ...
计算机文字环绕图片的方式有哪些,Word2003文字环绕图片方式怎么设置
用Word2003编辑文档为了能让图片显示的效果更好,我们可能会设置文字环绕图片方式,下面是学习啦小编给大家整理的一些有关Word2003文字环绕图片方式的设置方法,希望对大家有帮助! Word200 ...
C# 截取图片的方法
1.C#截取图片的方法方法一. 一个像素一个像素的画,遍历每一个像素,速度慢 /// <summary> /// 截取一张图片的制定部分 /// < ...
Android 7.0拍照/相册/截取图片FileProvider使用
Android 7.0拍照/相册/截取图片FileProvider使用 Android 70拍照相册截取图片FileProvider使用 GitHub地址 HIT THE PIT 需求实现解析一 ...
Python图片相册批处理器的设计与实现批量添加图片水印、批量命名等功能
课题研究使用Python语言开发一个包含批量添加图片水印.批量命名等功能的图片批处理程序,功能模块大概包含以下模块: (1)首页模块:首页是整个软件的初始页面,包含用户登录.注册.关于本软件等功能,用 ...
不懂如何在图片上添加贴纸？马上教你图片加贴纸方法
有时候我们拍摄的图片上,画面上偶尔会出现一些一些隐私的东西,这个时候怎么办呢?或许很多人首先会想到的就是马赛克吧,其实呢,马赛克确实能帮助我们遮挡住一些私密的东西,但是与此同时,它一方面影响美观,另一 ...

css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块

css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块相关推荐

最新文章

热门文章