Question

我要做的是让背景图像填满整个页面，但是能够向下滚动并且不会让图像永远存在。如果我将图像添加到div背景大小的覆盖剂不起作用，我需要添加一个看起来不太理想的高度和宽度。

body {
	background-image: url("http://cdn.wallpapersafari.com/66/90/zq7i3T.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
h1 {
	color: white;
	font-size: 50px;
	text-align: center;
	position: relative;
	top: 2000px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Luke Hayes</title>
</head>
<body>
    <div class="hero">
	<h1>Some testing text</h1>
    </div>
</body>
</html>

Answer 1

将体型应用于英雄div，并使其填充视口（高度：100vh）

      .hero {
        height: 100vh;
        background-image: url("http://cdn.wallpapersafari.com/66/90/zq7i3T.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

      h1 {
        color: white;
        font-size: 50px;
        text-align: center;
        position: relative;
        top: 2000px;
      }

  <body>
    <div class="hero">
<h1>Some testing text</h1>
    </div>
  </body>

英雄形象 - 不知道如何表达这一点

1 个答案: