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

Question

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

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

这段代码不起作用，它让她没有出现。 我总是需要设置一个高度，问题是手机和桌面的高度不同。

所以你可以说..'你可以设置高度：100%'..我做了..但没有任何反应，图像不会出现，只有当我用像素设置时。

Answer 1

更新

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

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

所以，这实际上应该对你有用：

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

如果我的假设是正确的，那么还有一件事：您不需要超过 5000 像素高的背景来实现您的目标，只需将其降低到 1 像素高度（即所需背景的 1 行）并将您的 css 更改为：

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

我希望这有帮助

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

一种可能的解决方案是添加以下内容：

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

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

其他可能的解决方案：

使用视口单位

.main {
  height:100vh;
}

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

将背景添加到身体本身

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

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

Answer 2

您是否尝试过添加这种样式？

html, body{ height: 100%;}

然后添加一个height:100%; 到你的.main div

Answer 3

您正在使用背景图像...请记住，渲染图像的大小与图像本身无关，而是与为包含它而创建的元素有关。

现在，如果您希望图像以 100% 的高度和宽度显示，您可以使用属性background-size: contain ，而不是封面。 这将告诉浏览器不应裁剪您的图像（只要您为 .main 元素设置了高度）。

在我看来，如果您只使用<img>标签而不是 css 背景，那么您想要的那种效果会更容易实现。

Answer 4

我有一个关于 flex box 无法适应背景高度的问题，下面的代码适合我。 其余的背景大小、重复和位置取决于您的。

html{
    height:auto;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}