更改不同设备上的背景图像定位

Question

我想知道如何设置 css 以便当我的设备足够小时，显示背景图像的特定部分（而不是原始图像的中心？）

目前我的背景图片设置为

background-image: url(*.jpg);
background-position: center;

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

现在，当您缩小尺寸时，它只显示图像的中心，我希望显示图像左侧大约三分之一的内容。

是否可以仅使用 css 来做到这一点？

谢谢:)

Answer 1

您需要进行媒体查询，然后进行背景定位：

@media(min-width: 768px){
    background-position: 35% 55%; //percentage-based to "absolutely" position
    /*background-position: center left;*/ //Maybe this too

}

更改不同设备上的背景图像定位

Change background image positioning on different devices

html

css

resize

device

background-image