Html 背景图像显示图像的特定部分

我这里有一个

图像

，我只想要显示的特定位置。但是我的不行。我只希望手在不剪切原始图像的情况下进行查看。提前谢谢

预期结果

HTML

---

使用CSS剪辑。您可以在页面上裁剪图像，而无需编辑原始图像源文件

---

组合

背景大小

和

背景位置

CSS属性。别忘了可以使背景大小值大于100%。我会把这个扔给它，然后从那里微调：

.banner{
  background: url(../img/img1.png);
  // background-size takes height and width but shorthand is one value used for both
  background-size: 200%;
  // background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  background-position: center center;
}

---

看看你期望的形象，我想你可以试试这个：

background-repeat: no-repeat;
background-size: cover;
background-position: top;

---

但它只适用于html

img

mine的CSST中。这是一个CSS属性，仅适用于imgtags@Yunnosch谢谢你的提醒。我觉得编辑很奇怪，但我只是没心情参与这件事。这很有效，但还有别的办法吗？因为我还在其他背景图像中使用它。但是不同的位置我不确定我是否理解，你可以使用相同的图像作为多个不同元素的背景，每个元素都有自己的CSS值。我错过什么了吗？@Simran非常接近。您只需要在中输入一个特定的

背景位置
值。它需要类似于
背景位置：-10%-15%
。或者您可以输入
px
或
em
或您需要的任何内容。
.banner{
  background: url(../img/img1.png);
  // background-size takes height and width but shorthand is one value used for both
  background-size: 200%;
  // background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  background-position: center center;
}

background-repeat: no-repeat;
background-size: cover;
background-position: top;