背景图像未拉伸到页面底部：无法使用背景附件答案

【问题标题】：Background image does not stretch to bottom of page: cannot use background-attachment背景图像未拉伸到页面底部：无法使用背景附件
【发布时间】：2019-06-21 02:24:30
【问题描述】：

我正在处理一个需要完全覆盖整个页面的背景图像的项目。我无法使用属性“背景附件：封面”，因为此页面还需要在不支持背景附件的 iOS 上查看。

.sky-background {
  background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* cannot use this property */
  /* background-attachment:fixed; */
}

<body class="sky-background">
</body>

我一直在寻找可用于 iOS 的替代品，但到目前为止我还没有找到任何令人满意的东西。有没有人可以指点一下？

【问题讨论】：

标签： html ios css background position

【解决方案1】：

你可以试试这个。

html {
  height: 100%;
}

body.sky-background {
  height: 100%;
}

【讨论】：

【解决方案2】：

这与文档高度有关。试试body {min-height: 100vh;} 或更好的html {100%};。

【讨论】：

【解决方案3】：

使用这个，希望对你有帮助。

<!DOCTYPE html>
<html>
<head>
<style> 
	html {
		height: 100%;
	}
	body {
	  background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
	  background-position: center;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-color: #cccccc;
	}
</style>
</head>
<body>
	<h1>The background-image Property</h1>
	<p>Hello World!</p>
</body>
</html>

【讨论】：

【解决方案4】：

只有在你的 body 元素上增加高度才能起作用。使用高度：100vh；在.sky-背景上。希望对您有所帮助

.sky-background {
  background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body class="sky-background">
</body>
</html>

【讨论】：