html - 背景图像以 x y 为中心

Question

我想知道他们是否是一种让我的背景以 x 和 y 为中心的简单方法？

我的示例很简单，我有一个大图像，并将其用作背景图像。但是我的图像中最重要的部分不在它的中间(我图像上的红色 X)。

因此，当我调整屏幕大小时，我的背景图像居中但不是我想要的方式(例如，我们看不到整张脸)。有没有办法通过在 css 上设置一些 x 和 y 中心位置来“改变中心”？

html:

<div id="service_4">
</div>

CSS:

#service_4 { 
    background-image: url(../img/service/service_4.jpg);
    background-size: cover;
    background-position: center;
}

谢谢大家

编辑:更改图像以使其更清晰

Answer 1

也许你需要

background-size: contain 或 background-size: cover