CSS clip
此CSS属性指定元素的可见区域。它适用于绝对定位的元素
(position:absolute;)。通常在图像大于其包含元素时使用。
它允许我们定义一个矩形,该矩形被指定为用于裁剪绝对定位的元素的四个坐标。
语法
clip: auto | shape | initial | inherit;
可能的值
auto:这是默认值,它按原样显示元素。不会有剪切。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.auto {
position: absolute;
width: 400px;
height: 400px;
clip: auto;
}
</style>
</head>
<body>
<h2>clip: auto; property</h2>
<img src="jtp.png" class="auto">
</body>
</html>
shape:用于剪切元素。它剪切元素的定义区域。其有效值为
rect(顶部,右侧,底部,左侧)。
示例
<html>
<head>
<style type="text/css">
div {
background: url(jtp.png);
clip: rect(0px, 150px, 250px, 0px);
border: 3px solid red;
height: 200px;
width: 250px;
position: absolute;
}
</style>
</head>
<body>
</body>
</html>
输出: