Question

我有3个部分，他们的父母只是身体，在这种情况下第2节（菜单）背景大于100vh。给高度：自动;不会工作，我想根据背景长度（自动）拉伸该部分的高度，我不想使用（px，vh，cm，......）给它一个特定的值。等等）。我很确定这是一个简单的答案，但我无法弄明白自己。谢谢

＆＃13;

html,body {
	position: relative;
	background: white;
	margin: 0;
	padding: 0;
}

#Home {
	position: relative;
	height: 100vh;
	width: 100vw;
	background-image: url(/images/Header.jpg);
	background-size: cover;
	background-repeat: no-repeat;


}

#Menu {
	display: block;
	position: relative;
	height: auto;
	width: 100vw;
	background-image: url(/images/Menu.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	
}

＆＃13;

<html>

	<body>
		<section id="Home"></section>
		
		<section id="Menu"></section>
		
		<section id="Map"></section>

	</body>

</html>

＆＃13;

Answer 1

唯一可以实现此目的的方法是不使用实际的背景属性。

正如@Mr Lister评论的那样：

元素无法知道背景的高度图像。

但是，您可以在#menu部分中使用带有所需图像的img标记作为背景。然后，创建一个具有绝对定位的容器div，它将包含实际部分的内容。

html,
body {
  position: relative;
  background: white;
  margin: 0;
  padding: 0;
}

#Home {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url(http://i.imgur.com/8tcxHWh.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

#Menu {
  display: block;
  position: relative;
  width: 100vw;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
}

h2 {
  color: white;
  font-size: 4em;
}

<section id="Home"></section>

<section id="Menu">
  <img src="http://i.imgur.com/BF3ty6o.jpg">
  <div class="content">
    <h2>My content</h2>
  </div>
</section>

<section id="Map"></section>

创建一个可根据背景图像高度调整高度的部分

1 个答案: