background-image 拉伸以适应超出视口

Question

我有一个页面需要 full-screen 背景图片。当 body 适合视口时，这很好用，我有 html { height: 100%; } 和 body { min-height: 100%; padding-top: 70px; ... background-size：封面； } （顶部填充用于页面 header）。当页面变得比视口大时，就会出现问题。 body 拉伸到正确的高度，但是背景附件永远不会大于视口的大小。这是一个示例 fiddle [https://jsfiddle.net/xdsgek6t/]。在实时版本中还有一个图像叠加层，但在 fiddle 中你可以很容易地看到径向渐变结束的线，即使我已经告诉它覆盖 body，在这个由于 child 元素，fiddle 高 3000 像素。

html { height: 100%; box-sizing: border-box; }
body {
  overflow-y: scroll;
  padding-bottom: 30px;
  padding-top: 70px;
  background-color: #363636;
  min-height: 100%;
 background-color: #1976D2;
 background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: right 70px;
 background-size: cover;
  margin: 0;
  box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<body>
  <header></header>
  <div class="something"></div>
</body>

当页面稍微变大时，这看起来真的很奇怪，并且在移动设备上非常明显。

Answer 1

从 html 中删除 height: 100%;，它将扩展。如果你在 body 上需要 min-height: 100%，你可以使用 min-height: 100vh 代替，这样就不会依赖 height: 100% 在 html

上

html { box-sizing: border-box; }
body {
  overflow-y: scroll;
  padding-bottom: 30px;
  padding-top: 70px;
  background-color: #363636;
  min-height: 100vh;
 background-color: #1976D2;
 background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: right 70px;
 background-size: cover;
  margin: 0;
  box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header>
<div class="something"></div>

background-image 拉伸以适应超出视口

background-image stretch to fit beyond viewport

css

background-image

background-size