CSS "cut away" 图片的两边和网页的填充背景

Question

我有一张图片，我被要求复制给我的例子。目前，我正在放置背景图片，并注意到他们给我的例子已经给出或采取，从顶部 100px，从底部 300px 拿走了（我只能猜测要裁剪的正确词汇）。我试图使用 :

body {
  background-image: url("stuffNthings.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

但发现使用此块时，图像的中心位置尽可能远地位于右上角，并且距离底部超过 300 像素。右侧显示正确。

Answer 1

最好知道您给出的这个示例是什么，但 background-position 属性在这种情况下可能会很好。

它将图像水平右对齐（我假设这就是你想要的，因为你说图像的右侧看起来是正确的）并将它垂直向上推 100 像素（并希望在底部留下 300 像素，它取决于图像的大小，但除非页面将在单一尺寸的屏幕上显示并且没有响应，否则我不会担心。

body {
  background-position: right -100px;
}

查看MDN Docs了解更多信息

CSS "cut away" sides of a image and fill background of webpage