html - 在 <div> 内滚动背景图片

Question

我一直在尝试用我的文本在 div 滚动中制作背景图像。 现在，当我向下滚动时，图像只是停留在页面顶部。 下面是我在实际页面上写的内容，然后是我的样式表中的两个类。两者中的后者只是我一直在胡闹的占位符。在过去的几个小时里浏览了大约 100 个链接，但仍然无法深入了解。

<div class="main">
        <div class="gunbg"></div>
</div>

.main 
{
    position: fixed;
    left:178px; top:155px; right:0; bottom:0;
    overflow: scroll;
    border: 3px solid #73AD21;
    transform: scale(1.0);
    transform-origin: 10% 10%;
}

.main .bgmain
{
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('images/gunbg.jpg') no-repeat center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

Answer 1

这是修复你的 CSS 的方法

HTML

<div class="main">
        <div class="gunbg">
          <h1>
          Hello World
          </h1>
        </div>
</div>

CSS

.main {
  background: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_559332799_Tree_Rings.jpg');
  background-attachment: fixed;
  background-size: cover;
  height: 130vh;
}


.gunbg{
  text-align:center;
  color:#fff;
  padding-top:200px;
}

DEMO