Skip to main content

CSS剪辑

此CSS属性指定元素的可见区域。它适用于绝对定位的元素(位置:绝对;)。通常在图像大于其包含元素时使用。

它允许我们定义一个矩形,它被指定为四个坐标,用于剪裁绝对定位的元素。

语法

clip: auto | shape | initial | inherit;

可能值

自动:它是显示元素的默认值。不会有剪辑。

实例

<!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>

形状:用于剪裁元素。它会剪裁元素的定义区域。其有效值为rect(上、右、下、左)。

translate failed

实例

<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>
<div></div>
</body>
</html>