css - 背景图片在手机上放大太多

Question

我的 RWD 页面有奇怪的问题。我有一个具有以下样式的背景图片:

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

当我在 Chrome DevTools(和 FF)中处于移动模式时，一切看起来都正常:

但是在真正的移动浏览器上这个背景变得太大了:

可能是什么原因？我的移动浏览器是 Android 上的 Chrome 63，我的桌面浏览器是 Ubuntu 上的 Chrome 59。

Answer 1

这是因为 background-attachment: fixed 设置在移动浏览器上不起作用...

尝试删除 background-attachment 属性并将 position 属性更改为 fixed，如下所示:

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

希望这会有所帮助...