Question

我有一个页面，我想要一个全屏背景图像。当身体适合视口时，这很好用，我有html {height：100％;和身体{min-height：100％; padding-top：70px; ...背景尺寸：封面; （顶部填充用于页眉）。当页面变得大于视口时，会出现问题。主体伸展到正确的高度，但背景附件永远不会大于视口的大小。这是一个示例小提琴[https://jsfiddle.net/xdsgek6t/]。在现场版本中还有一个图像叠加，但在小提琴中你可以很容易地看到径向渐变结束的线，即使我已经告诉它覆盖身体，这个小提琴由于孩子在3000px高元件。

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

从height: 100%;移除html，它会延长。如果您在min-height: 100%上需要body，则可以使用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拉伸以适应视口之外

1 个答案: