html - 移动背景大小无法正常工作 [html/css]

Question

首先，我想说我找到了这个帖子:"background-size: cover" does not cover mobile screen .
我已通读该线程中的回复并尝试过，但无济于事。

网站的浏览器版本如下所示: http://i.imgur.com/dmNWq.jpg
这是移动版本的样子: http://i.imgur.com/KGJ8247.png
(请耐心等待，因为我的代表率低，无法发布图片。)

相关 CSS:

.splash {
  z-index: 1;
  list-style: none;
  margin: 0px;
  padding: 0px;
  background: url('../assets/splash.png') no-repeat center center fixed;
  background-color: #159957;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  min-height: 100%;
}

基本上，问题是图像无法在移动设备上正确调整大小，即使设置了正确的覆盖也是如此。我不知道该走哪条路，如有任何帮助，我们将不胜感激!

Answer 1

代替:

background: url('../assets/splash.png') no-repeat center center fixed;

你应该使用:

background: url("../assets/splash.png") no-repeat fixed center center/cover;

为什么？

因为根据W3如果你想在速记语法中包含背景大小值，你需要:

Explicitly include background-position values even if these are the same as the defaults (see above).

Write background-position values before background-size values.

Put a slash in between these two pairs of values because without it we cannot distinguish which values are for which