使用background-size:cover时，移动端如何让背景图显示右侧区域？

当使用background-size: cover时，浏览器会按比例缩放背景图以填满容器，超出部分默认从两侧均匀裁剪。要保留图片右侧区域，只需通过background-position属性调整背景图的对齐方式，让图片向左偏移，将右侧内容留在可视范围内。

修改后的CSS代码如下：

#example {
  background: url("../img/image.png"), #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
  /* 让背景图右侧与容器右侧对齐，裁剪左侧区域 */
  background-position: right center;
}

补充说明： #

• background-position: right center 表示背景图水平靠右、垂直居中对齐，这样容器变窄时会优先裁剪图片左侧，保留右侧内容。
• 若需要更精确的偏移比例，可使用百分比值，例如background-position: 90% center，数值越大，图片向左偏移越多，右侧显示的内容范围越大。
• 也可以单独设置水平方向的位置：

  #example {
    background: url("../img/image.png"), #ffffff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 100%; /* 水平完全靠右 */
    background-position-y: center;
  }
  

内容的提问来源于stack exchange，提问作者changesquare