目录
该属性用于剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。
--------解释来源于W3school.com
通俗一点来说就是:通过使用该属性可以对某一个元素进行剪裁,只会显示剪裁后的部分
举个实栗子:
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
<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()需要设置四个值: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属性让三张图合三为一,能降低图片总大小,减少对浏览器的负担
代码部分:
<!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>
实例效果:
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}