CSS Clip属性

<html>
<head>
<style type="text/css">
img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>

</html>

图中的书的整张图被Clip剪切了，只显示了被剪裁的部分

②用法

这个属性用于定义一个剪裁矩形。clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上发挥作用。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.clip="rect(0px,50px,50px,0px)"

可能的值

值	描述
shape	shape是一个函数功能，设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	这是一个默认值，clip设置auto值和没有进行剪切是一样的效果。
inherit	规定应该从父元素继承 clip 属性的值。

浏览器支持

所有主流浏览器都支持 clip 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

Rect()使用

基本语法

rect()需要设置四个值：top, right, bottom和left。

rect()属性值和margin、padding以及bodrder都遵循TRBL顺时针旋转的规则。

rect (top, right, bottom, left);

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

来张图片你就懂了

实例解析

在50X55px的长方形盒子中是行剪切，得到虚线的长方形：

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

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

<top>, <right>, <bottom>, <left>可以将值设置为“auto”或者长度值<length>，还可以充许负的长度值。

<top>和<left>的值为auto时，就相当于top和left取值为0；

<right>和<bottom>的值auto时，就相当于元素的宽度（这个宽度包括元素的border、padding和width），或者简单的理解为100%。

举个栗子：

top取值为0时

.rect6 img {

  clip: rect(13px, auto, 161px, 30px);}

left取值为0

.rect7 img {

  clip: rect(13px, 164px, auto, 30px);}

注意：

特殊情况：rect()中的bottom值小于top值，或者right值小于left值时

拿这张图举例：

Left应该是在right的左边，结果现在left的值还比right大，也就是说现在left跑到了right的右边

这似乎有点不符合逻辑，那这样的话会怎样显示呢？

我们假设这是一张这张图，把left这条边取名为A，right这条边取名为B(方便区分而已)

假设A在B的左边的时候为正常放置在桌面上，能完全看到照片是什么，然儿现在A却在B的右边，也就是相当于把照片翻了过来，现在这张照片你会看不到它是什么。

所以当rect()中的bottom值小于top值，或者right值小于left值时不显示剪切区域

案例

通过clip实现行内sprites的效果

要制作上图的一个效果，一般来说都是使用三个图来制作，现在我们可以使用clip属性在行内使用sprites图来实现上图的效果，至于这两者的区别看看对比图就都能知道了。

通过使用clip属性让三张图合三为一，能降低图片总大小，减少对浏览器的负担

代码部分：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>clip demo</title> 
<style> 
* { 
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; 
} 
.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); 
} 
</style> 
</head> 
<body> 
<ul id="wrapper"> 
<li><img src="icons.png" alt="Happy Icon" class="icons happy" /></li> 
<li><img src="icons.png" alt="Sad Icon" class="icons sad" /></li> 
<li><img src="icons.png" alt="Angry Icon" class="icons angry" /></li> 
</ul> 




</body> 
</html>

实例效果：

发表评论