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

在<div>中滚动背景图像

1 个答案: