如何只取图像的一部分

在网页中经常会使用图像作为页面元素的一部分。有时候我们需要只显示图像的一部分，比如要展示一个人的头像，我们只需要显示头部部分的图像。

这个问题可以通过 CSS 中的 background-position 属性解决。

CSS background-position

background-position 属性用于设置背景图像的起始位置。该属性一般与 background-image 属性一起使用，可以用百分比或长度值来设置背景图像在其容器内的位置。

语法：

background-position: x-position y-position;

其中，x-position 和 y-position 可以是百分比或长度值。

如果只有一个值，则此值是 x-position，y-position 将默认为 center。

如果未指定 background-position，则图像在水平和垂直方向上都居中。

示例

接下来，让我们用一个例子来看看如何只取图像的一部分。

假设我们有如下 CSS 代码：

.icon {
  background-image: url('./avatar.png');
  width: 100px;
  height: 100px;
}

这里我们有一个 100x100 像素的方块，它的背景是一个名为 avatar.png 的图像。

现在我们只想要展示图像的上半部分，可以这样设置 background-position：

.icon {
  background-image: url('./avatar.png');
  width: 100px;
  height: 50px; /* 仅展示上半部分，因此高度为 50 像素 */
  background-position: center top; /* 在垂直方向上将背景图像的起始位置设置为顶部 */
}

这样我们就只展示了图像的上半部分。

总结

通过 background-position 属性，我们可以轻松地只展示图像的一部分。同时，我们也可以使用它来控制图像在容器内的位置。

让我们来总结一下本文介绍的内容：

• background-position 用于设置背景图像在容器内的起始位置；
• 可以使用百分比或长度值来设置图像的位置；
• 如果只有一个值，则默认为水平位置；
• 可以使用关键字 top、bottom、left、right 来设置图像的位置。

希望这篇文章对你有所帮助！