如何用CSS显示图像的一部分？

Question

我有一个 1400x350 的图像用作横幅，我希望显示其高度的 80%。我不想缩放图像，我只需要显示它的一部分。想象一张汽车的图片，我想从轮胎上方显示。

\n\n

我发现的所有内容都显示了如何缩放或调整图像大小，但仍然显示 100% 的原始图像。我只想显示原始图像的一部分。我可以在图像编辑器中手动裁剪图像，但我希望能够使用 CSS 来完成此操作。

\n\n

我现在正在使用它作为 div 的背景。

\n\n

div.banner {\n    content: url(\'../Images/banner.jpg\');\n    background-color: #A5B7C7;\n}\xe2\x80\x8b\n\n<div class="banner"></div>\n

Answer 1

这可以简单地通过设置来实现background-position: center bottom;。如果您的容器现在比背景图像小，它就会隐藏在顶部，因为它与底部对齐。

在此示例中，背景图像高度为 400px，但容器高度仅为 300px：

.banner {
  background: url('https://place-hold.it/300x400');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

<div class="banner"></div>