CSS 使用CSS剪裁/裁剪背景图像

在本文中，我们将介绍如何使用CSS剪裁/裁剪背景图像。CSS的clip和background-size属性可以帮助我们实现这一目标。

阅读更多：CSS 教程

使用clip属性剪裁背景图像

CSS的clip属性可以定义一个剪裁区域，只显示该区域内背景图像的一部分。clip属性使用四个值来定义矩形区域的位置：top、right、bottom和left。

下面是一个示例：

.clip-img {
  width: 300px;
  height: 200px;
  background-image: url("image.jpg");
  background-size: cover;
  clip: rect(50px, 250px, 150px, 100px);
}

在上面的示例中，我们定义了一个名为.clip-img的类，它具有300像素宽和200像素高的容器。背景图像使用url("image.jpg")指定，并通过background-size: cover属性设置为 cover，以确保背景图像完全覆盖容器。

clip属性的值为rect(50px, 250px, 150px, 100px)，表示剪裁区域的位置。这里的top、right、bottom和left值分别为50像素、250像素、150像素和100像素。这意味着只有位于这个剪裁区域内的背景图像才会显示出来。

使用background-size属性裁剪背景图像

除了clip属性，CSS的background-size属性也可以用来裁剪背景图像。background-size属性定义了背景图像的大小，可以使用特定的尺寸或关键词来指定。

下面是一个示例：

.crop-img {
  width: 300px;
  height: 200px;
  background-image: url("image.jpg");
  background-size: 200px 150px;
  background-position: center center;
  background-repeat: no-repeat;
}

在上述示例中，我们定义了一个.crop-img的类，具有300像素宽和200像素高的容器。背景图像使用url("image.jpg")指定，并通过background-size: 200px 150px属性设置为200像素宽、150像素高。背景图像的位置通过background-position属性设置为居中，并且通过background-repeat属性设置为不重复。

这个例子中，背景图像的大小设置为200像素宽、150像素高，所以只有以该尺寸范围内的部分被显示在容器中。其他部分将被裁剪。