目录
一、什么是Clip属性
1、定义及用法
①定义
该属性用于剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？"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()使用
- 基本语法
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>实例
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
