如何使用 CSS 显示图像的一部分？ [复制]答案

【问题标题】：How to display a portion of an image with CSS? [duplicate]如何使用 CSS 显示图像的一部分？ [复制]
【发布时间】：2017-03-09 05:29:59
【问题描述】：

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

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

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

div.banner {
    content: url('../Images/banner.jpg');
    background-color: #A5B7C7;
}

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

【问题讨论】：

【解决方案1】：

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

在本例中，背景图片高度为 400px，但容器高度仅为 300px：

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

&lt;div class="banner"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以通过使用 clip 属性来实现这一点，为此您需要保持绝对位置或固定位置 http://www.w3schools.com/cssref/pr_pos_clip.asp

这里是您的图片示例：http://jsfiddle.net/2U3CE/1/

    img{
        position:absolute;
        clip:rect(0,73px,73px,0);
       }

【讨论】：

【解决方案3】：

你可以通过调整背景位置来获得你想要的图像的一部分。

【讨论】：