Question

我一直在努力解决这个问题，现在已经有2个小时了...尝试了多个指南，没有任何效果。

这是我的css：

body {
margin:0;
background:url('chalk.jpeg');
}

html, body {
  height: 100%;
}

.welcome{
    text-align: center;
    position:relative;
    height:100%;
    background:rgba(38, 36, 15, 0.7);
}

但是，出于某种原因，页面如下所示：https://i.imgur.com/iPvMTk1.jpg

我希望欢迎div背景位于正文背景图像的顶部，直到页面结束。尝试了很多解决方案，但没有任何方法可行。

Answer 1

您可以使用视口单元执行此操作，其中body 元素获取视口高度的100% height: 100vh，然后延伸 .welcome div height: 100%：

html, body {
  width: 100%;
  height: 100vh; /* 100% of the viewport height */
  margin: 0;
}

body {
  background: url('http://placehold.it/1600x900') no-repeat center center; /* modified */
  background-size: cover; /* recommended / also try the "contain" */
}

.welcome {
  text-align: center;
  position: relative;
  height: 100%;
  background: rgba(38, 36, 15, 0.7);
}

<div class="welcome">welcome div</div>

使div背景与身体高度相同

1 个答案: