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

我有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>

来源

2017-08-31 Mazen Da

没有办法一个元素知道背景图像的高度。简单的解决方案是使用。 –

感谢哥们，它确实工作:) –

就可以实现，这是通过不使用的实际背景属性的唯一途径。

由于@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>

来源

2017-08-31 07:47:24

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

回答

相关问题