在CSS中将原点设置为背景图像

Question

我正在编写一个全宽图像的网站作为练习，我偶然发现了一件有趣的事情：我希望它尽可能地响应，所以我的图像当然会随着设备的变化而调整大小。但是，在一张图片中，我希望将这一点作为调整大小的中心点。

比方说，它是一个小房子，图像中间有一棵附近的树，我希望图像围绕它调整大小，而不是左上角，这是本机调整大小点。我的图像当前被设置为div的背景图像并且大小为封面。

它可以在CSS中完成，如果是，如何？我没有太多的时间用于此，所以我认为我不会使用JS（这是一个非常小的事情，但我只想知道这是可能的！）。

谢谢 ！

（我看过背景，但我没看到它如何回答我的问题）

Answer 1

原图：https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg

您可以使用background-position:center属性将其与中心对齐。您还可以使用background-size来调整容器的图像大小。

.bg {
  background: url("https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-position: center;
}

.bg2 {
  background: url("https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-position: -20px 60px; /* Xvalue Yvalue */
}

<div class="bg"></div>
<br>
<br>
<div class="bg2"></div>