javascript - 如何获得 100% 高度的背景图像覆盖？

Question

我正在使用高度为 5000 像素的图片，我想让它在移动设备和桌面设备中始终显示 100% 的宽度和高度以覆盖背景。

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
  width: 100%;
}

此代码不起作用，它使她不出现。我总是需要设置一个高度，问题是手机的高度与桌面的高度不同。

所以你可以说..“你可以设置高度:100%”..我做了..但是没有任何反应，图像没有出现，只有当我用 pxs 设置时。

Answer 1

更新

我觉得有必要更新我的答案，因为我显然以错误的方式理解了这个问题。我将把旧版本留在底部，因为显然很多人发现它有帮助，即使它未能回答原始问题。

由于您的背景图像在重复，我假设您不想要整个图像，只需要您需要的任何高度。所以，你需要两件事:

1. 在 .main 上设置高度
2. 完全摆脱 background-size

所以，这应该对你有用:

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  width: 100%;
  height: 100%;
}

如果我的假设是正确的，还有一件事:你不需要超过 5000px 的背景来实现你的目标，只需将它降低到 1px 高度(即你想要的背景的 1 行)并将你的 css 更改为:

.main {
  position: relative;
  background: url('../images/background.png') repeat-y top center; 
  background-size: cover;
  width: 100%;
}

希望对你有帮助

旧版本

您的 .main 没有高度并且 height:100%; 不起作用，因为包含它的元素本身没有高度。

一个可能的解决方案是添加:

html, body, .main {
  height:100%;
}

这可能正是您所需要的，但您也可能会遇到此解决方案的其他问题。这完全取决于您实际想要实现的目标。

其他可能的解决方案:

使用视口(viewport)单位

.main {
  height:100vh;
}

请注意，某些移动设备对这些内容的解释与您的预期不同。

为正文本身添加背景

body {
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
}

正如我之前所写:很难说哪种解决方案是最好的，这取决于您的目标。