有没有办法让图像在调整大小和裁剪以适合移动设备时显示其右侧？

Question

我正在制作一个网站，我有一个封面图片作为标头部分的背景。图像设置为background-size: cover。当网站针对移动设备进行缩放时，图像的右侧会被切断。我想知道是否可以强制图像在移动设备中向左滑动，以便图像的右侧保持可见？

我使用的CSS：

#example {
  background: url("../img/image.png"), #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
}

当您调整窗口大小时，也会出现类似的效果： https://www.w3schools.com/cssref/tryit.php?filename=trycss3_background-size

Answer 1

您可以设置背景位置属性来控制图像在其容器内的位置。

#example {
  height: 300px;
  background: url("https://images.pexels.com/photos/931881/pexels-photo-931881.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"), #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

<div id="example"></div>