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

【问题标题】：Mobile background-size not working properly [html/css]移动背景大小无法正常工作 [html/css]
【发布时间】：2015-09-22 10:40:21
【问题描述】：

首先，我想说我找到了这个帖子："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%;
}

基本上，问题在于图像在移动设备上的尺寸不会正确，即使有正确的覆盖。我不知道该走哪条路，任何帮助将不胜感激！

【问题讨论】：

如何链接到您的网站？或者至少是一个有效的小提琴/codepen 演示？
@Renerrix 你试过我的解决方案了吗？

标签： html css background size background-image

【解决方案1】：

而不是：

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

您应该使用：

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

为什么？

因为根据W3，如果你想在简写语法中包含背景大小值，你需要：

显式包含背景位置值，即使这些值与默认值相同（见上文）。

在背景大小值之前写入背景位置值。

在这两对值之间加上一个斜线，因为没有斜线我们无法区分哪个值对应哪个

【讨论】：