这是我的代码:
#bener{
background:url(../img/main.png) no-repeat;
background-size:120%;
}
.bener_content{
color:#fff;
text-align:center;
margin-top: 30%;
}
.bener_overlay{
background: rgba(75, 78, 78, 0.7);
height: 120%; //This line
}
.bener_content h2{
color:#ffff;
}
.bener_content p{
color:#ffff;
}
<section id="bener" class="">
<div class="bener_overlay">
<div class="container">
<div class="bener_content">
<p class="textmiddle">TEXT</p>
<h3>Text</h3>
</div>
</div>
</div>
</section>
我的问题是,每当我以不同的分辨率尝试访问网站时,我的主页图像都不会缩放,宽度很好,但是高度总是一样的。在.benner_overlay中,我使用了以百分比表示的高度,但是由于某些原因,它什么也不做,当我使用像素时,它没有响应。
我该如何解决这个问题,以便无论我在哪里浏览我的网站,首页图像都可以覆盖整个屏幕?
最佳答案
正如CBroe已经提到的那样,为了使用基于百分比的高度,您的父元素也需要具有基于百分比的高度。为此,您基本上必须从根元素开始并遍历树。可能的解决方案如下所示。
html, body {
height: 100%;
}
#bener {
background: url(../img/main.png) no-repeat;
background-size: 120%;
height: 100%;
}
Demo
关于css - 响应高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45413527/