clip

一、使用clip控制图片显示区域

二、雪碧图 实现原理 ,主要是定位方式 : background-position    ; 以及使用clip 实现定位 。,还有其他的定位方式 :如margin等等。

首先好久没更新博客啦,学到一个点就写上来。http://www.1000zhu.com/ 网站里有个hover的动画,很好看,使用clip来裁剪图片的。下面就是对clip的详解以及扩展。


定义和用法:

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。

clip属性只接受三个不同的属性值:

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

 

rect()需要设置四个值:top, right, bottom和left。他们之间需要用逗号隔开,而且rect()属性值和margin、padding以及bodrder具有一样的标准,遵循TRBL顺时针旋转的规则。
[css] clip: rect(top, right, bottom, left); [/css]

rect()不能支持百分比值

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

clip

 

通过此图就可理解四个属性值了。

浏览器兼容性:

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

[css] clip: rect(10px 350px 170px 0); /* IE4 to IE7 /
clip: rect(10px, 350px, 170px, 0); /
IE8+ & other browsers */
[/css]

 

clip实现sprite:

sprite 雪碧图的具体实现就看:http://www.w3cplus.com/css3/clip.html

实例:

开始提到的http://www.1000zhu.com/ 里的效果:是通过对top值的变化来展示动画的。