裁剪图像以仅放大到 div 内该图像的一部分

Question

有没有办法使用 CSS 来让仅图像的特定部分显示为 div 背景？基本上就像裁剪？

这张来自 adobe 的图片几乎概括了我的意思以及我希望我能用 div 做什么：

我想使用网络上的图像作为特定尺寸的 div 的背景图像（例如横幅）。然而，大多数谷歌搜索都会带我去

有什么方法可以做到这一点？我习惯于使用大多数图像编辑界面（adobe、大多数社交媒体图像编辑工具）轻松完成此操作，但我发现使用 CSS 很难做到这一点。大多数谷歌搜索都会让我看到像object-position、background-size或object-fit这样的东西，但所有这些都假设你想要整个图像。如果有一种方法可以让您的 div 容器中看到部分图像，我会很高兴。

Answer 1

我认为您正在寻找的房产是

background-position

。通过定义 div 的

width

和

height

，您可以定义裁剪区域的大小/尺寸。然后使用

background-position

属性，您可以移动该裁剪区域。

这是一个例子：

.cropped {
  width: 128px;
  height: 128px;
  background-position: 0 100%;

  background-image: url("https://source.unsplash.com/512x256?city");
  position: absolute;
  bottom: 0;
}

.full {
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url("https://source.unsplash.com/512x256?city");
  width: 512px;
  height: 256px;
  position: relative;
}

<div class="full">
  <div class="cropped"></div>
</div>