Html 修复了从页面下方开始的背景和div

我想创建一个简单的css样式，但似乎很难实现

我想实现的是有一个固定的背景图像，以适应整个页面，我希望网站的内容是“下面”的图像，这意味着当用户访问页面时，他将只看到背景，向下滚动后，内容将出现在下面

我试过这个

.content{
背景图像：url（'../img/header bg.jpg'）；
背景位置：中心；
背景尺寸：封面；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
宽度：100%；
身高：100%；
}
.内容标题{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：#fed136；
}
.页面正文：：之前{
位置：相对位置；
}
.页体{
位置：绝对位置；
底部：0；
左：0；
右：0；
}
.查看更多{
宽度：100%；
高度：125px；
边界：无；
背景：rgba（0,0,0,3）；
}

你好，世界
查看更多
点击我

对于

页面正文

，请使用

顶部：100%

和

位置：绝对

。另外，删除css之前的

.content{
背景图像：url（'../img/header bg.jpg'）；
背景位置：中心；
背景尺寸：封面；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
宽度：100%；
身高：100%；
}
.内容标题{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：#fed136；
}
.页体{
位置：绝对位置；
底部：0；
左：0；
右：0；
最高：100%；
}
.查看更多{
宽度：100%；
高度：125px；
边界：无；
背景：rgba（0,0,0,3）；
}

你好，世界
查看更多
点击我

我稍微更改了您的CSS，因为我需要从头开始，但我认为这正是您想要完成的。我使用z-index指定哪些元素位于顶部。我还添加了.page body{top:100%；}，如@nikhil所述

<div class="content">
  <div class="content-title">
    <h1>Hello World</h1>
  </div>
</div>

<div class="page-body">
  <button class="view-more">View More</button>
  <div class="page-holder">
    <button>Click Me</button>
  </div>
</div>

---

恐怕我不太明白你的问题。如果图像固定在您的内容顶部。。。当用户向下滚动时，如何才能看到下面的任何内容？如果图像和内容都不移动，则图像仍将位于内容的顶部。你在寻找视差效果吗？或者是某种透明度？位置固定会使内容漂浮在其上，除非您强制向下推内容。我不确定您在问题中想问什么，但您是否尝试过

位置：sticky

？

.content {
  background: rgba(0,0,0,0.4);
  background-position: center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.content-title {
  display: table;
  z-index: 1000;
  width: 100%;
  height: 100%;
  color: yellow;
}

h1 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.page-body {
  display: block;
  position: absolute;
  text-align: center;
  top: 100%;
}