创建一个高度可调节的部分根据背景图像高度
问题描述:
我有3个部分,他们的父母只是身体,第2部分(菜单)背景在这种情况下大于100vh。给予高度:汽车;将无法工作,我想根据背景长度(自动)拉伸部分的高度,我不想用(px,vh,cm,...等)给它一个具体的值。我很确定这是简单的答案,但我无法弄清楚我的自我。谢谢创建一个高度可调节的部分根据背景图像高度
html,body {
\t position: relative;
\t background: white;
\t margin: 0;
\t padding: 0;
}
#Home {
\t position: relative;
\t height: 100vh;
\t width: 100vw;
\t background-image: url(/images/Header.jpg);
\t background-size: cover;
\t background-repeat: no-repeat;
}
#Menu {
\t display: block;
\t position: relative;
\t height: auto;
\t width: 100vw;
\t background-image: url(/images/Menu.jpg);
\t background-size: cover;
\t background-repeat: no-repeat;
\t
}
<html>
\t <body>
\t \t <section id="Home"></section>
\t \t
\t \t <section id="Menu"></section>
\t \t
\t \t <section id="Map"></section>
\t </body>
</html>
答
就可以实现,这是通过不使用的实际背景属性的唯一途径。
由于@Mr李斯特说:
没有办法一个元素知道背景 图像的高度。
但是,您可以在您的#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>
没有办法一个元素知道背景图像的高度。简单的解决方案是使用。 –
感谢哥们,它确实工作:) –