Clip

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果。

我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性。

/* Hide only visually, but have it available for screenreaders*/
.visuallyhidden {
  border: 0 none !important;
  clip: rect(1px 1px 1px 1px);/*IE<8*/
  clip: rect(1px,1px,1px,1px);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px;
}	

如果你不知道也不用担心,接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章,你将对clip属性有一个很深的了解。

Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。

大家应该看过使用javascript的插件来剪切元素,但是你也可以使用CSS的clip属性实现,也许会有一些限制,但我们可以一起看看。

语法:

想要了解clip属性,我们很有必要先学习clip的语法知识:

.selector {
	clip: <shape> | auto | inherit
}	

首先你要注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。

说实话,我真的不知道为什么是这样的。至少,我在网络上没有发现任何有关于这方面的话题,因此,如果你要是知道为什么,希望您能在下面的评论中分享一些知识。

上面的语法告诉我们,clip属性只接受三个不同的属性值:

  1. <shape>:shape是一个函数功能,当使用仅使用rect()属性;
  2. auto:这是一个默认值,clip设置auto值和没有进行剪切是一样的效果;
  3. inherit:继承父元素的clip属性值。

很多时候,你可能希望有更多的shape函数功能使用,比如说rect()和circle()等,但是到目前为止仅有rect()函数可使用,不过不用担心,这个功能就可以帮我们制作很多很酷的效果。

Rect()使用

接下来我们来看rect()使用方法。rect()需要设置四个值:top, right, bottom和left。他们之间需要用逗号隔开,而且rect()属性值和margin、padding以及bodrder具有一样的标准,遵循TRBL顺时针旋转的规则。

  clip: rect(<top>, <right>, <bottom>, <left>);

在CSS2.1中,rect()和<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起;<left>和<right>指定的偏移量是从元素盒子左边边缘算起。

clip

我们简单的来看一个例子:

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }	

上面的例子是在50X55px的长方形盒子中是行剪切,得到虚线的长方形:

clip

<top>, <right>, <bottom>, <left>可以将值设置为“auto”或者长度值<length>。而且还可以充许负的长度值。其中取值为“auto”时,剪切区域的边缘和元素盒子边缘相同。例如:在<top>和<left>设置为auto时,他们就相当于top和left取值为0;如果<right>和<bottom>设置为auto时,他们就相当于元素的宽度(这个宽度包括元素的border、padding和width),或者简单的理解为100%。

针对上面所言,将clip分为以下几种:

1、不显示剪切区域:当rect()中的bottom值小于top值,或者right值小于left值时,整个剪切区域不会显示。例如:

.rect2 img {
  clip: rect(13px,0,161px,30px);/*right值小于left值*/
}
.rect3 img {
  clip:rect(13px, 164px, 0, 30px);/*bottom值小于top值*/
}	

2、top和left取值为auto,当top或者left取值为auto时,相当于取值为0;

.rect4 img {
  clip: rect(auto, 164px, 161px, 30px);
}
.rect5 img {
  clip: rect(13px, 164px, 161px, auto);
}	

clip

rect(auto,164px,161px,30px)效果

clip

rect(13px,164px,161px,auto)效果

3、bottom和right取值为auto,当bottom和right取值为auto时,相当于元素的100%宽度。

.rect6 img {
  clip: rect(13px, auto, 161px, 30px);
}
.rect7 img {
  clip: rect(13px, 164px, auto, 30px);
}	

clip

rect(13px,auto,161px,30px)效果

clip

rect(13px,164px,auto,30px)效果

3、bottom和right取值为auto,当bottom和right取值为auto时,相当于元素的100%宽度。

详细点击demo

rect()不能支持百分比值,这一点需要特别的注意。

浏览器兼容性

你可能会很关注,这个属性的兼容性不知道如何?请放心,clip属性得到较好的支持,在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法,但在ie4.0至ie7.0我们还是需要做一定的处理,需要把每个属性值之间的逗号去掉。

.my-element {
  position: absolute;
  clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
  clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}	

需要特别的注意,ie4-ie7的要写在标准语句的前面,不然其他浏览器下将会无任何效果。

案例

上面是各种理论的讲解,接下来我们一起来动手做一个案例,通过clip实现行内sprites的效果。

clip

要制作上图的一个效果,我们平时都是使用三个图来制作,那么使用clip属性我们也可以在行内使用sprites图来实现上图的效果,这两者的区别我就不多说,大家看看他们的对比截图:

clip

图中说明一切,接下来我们主要看的是如何使用clip实现效果,先写个简单的HTML结构:

<ul id="wrapper"&ht;
  <li&ht;<img src="icons.png" alt="Happy Icon" class="icons happy" /&ht;</li&ht;
  <li&ht;<img src="icons.png" alt="Sad Icon" class="icons sad" /&ht;</li&ht;
  <li&ht;<img src="icons.png" alt="Angry Icon" class="icons angry" /&ht;</li&ht;
</ul&ht;	

一个很简单的结构,初步的效果如下:

clip

先来给他一个基本布局样式:

* {
  margin:0;
  padding: 0;
}	

#wrapper {
  position: relative;
  width: 386px;
  margin:50px auto;
  list-style: none outside none;
}	
#wrapper li {
  width: 128px;
  height: 128px;
  float: left;
  position: relative;
}	

此时效果如下:

clip

这离我们需要的效果还相差很远,接下来就需要clip来发挥他的功能了,我们简单先分析一下,对于这三个脸谱,距离顶部的距离都是“0”而距离底部都是“128px”,这样我们就确定两个参数了,只需要对每个脸谱确定left和right的参数。

先来看sad脍,他是在sprites图片的最左边,那么我们可以明显的确定他的另外两个值:left为0;right为128px,如下图所示:

clip

对于happy脸,我们在sprites图中间,根据相关参数,我们可以推算或者测量出其left值为128px,right值为256px,但这个时候有一个细节,我们使用clip进行剪切,前面会留有空白(也就是sad脸位置),为了能正常显示,需要在这个Img中设置一个left值为“-128px”,将happy拉出来:

clip

最后一张是angry脸,按前面的方法我们很容易的得到left值为256px,right值为384px(在这里也可以是auto,前面有讲过),同样前面有占位的,也需要用left值拉回来:

clip

详细代码如下:

.icons {
  position:absolute;
  top:0;
  left:0;
}

.happy {
  clip: rect(0 256px 128px 128px);
  left:-128px;
}

.angry {
  clip: rect(0 384px 128px 256px);
  left:-256px;
}

.sad {
  clip: rect(0 128px 128px 0);
}	

如此一来,效果就出来了,大家可以点击这里查看效果。

这里展示的是仅是其中一个很简单的案例效果,其实你可以发挥你的想像力,配合一些css3的特效制作出一些很酷的效果。

这是一个很特殊的属性,也是一个很少见的属性,少见是由于他不被人了解,虽然他受限蛮多,但在一些情况下使用这个属性能轻松的帮你实现你需要的效果。而且这个属性使用也并不复杂。通过上面的介绍,大家应该对clip有所了解了。希望这篇文章能对大家有所收获。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/clip.html

返回顶部