背景图像没有留在原地

Question

我已在我的部分容器中添加了一个 background-img。在里面我不想创建另一个 div，它位于顶部并将包含单独的 img/copy。目前，如果我尝试使用边距或填充定位该 div，它也会移动背景图像（请参见屏幕截图中的空白）。

有没有办法设置这个 div 的样式，这样我就可以在不移动部分背景图像的情况下对齐它？作为参考，“树”图像是背景图像

  .section__feature {
      background-image: url('/assets/img/hero.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100vh;
    }
    
    .featured {
      position: relative;
      margin-top: 2rem;
      &__img {
        background-image: url(/assets/img/featured.jpg);
        background-position: center;
        background-size: cover;
        height: 20rem;
      }
    
      grid-area: featured;
    }

<section class="section__feature">
        <div class="grid-container">
          <div class="featured">
            <div class="featured__img"></div>
          </div>
          <div class="feature-small-top"></div>
          <div class="feature-small-bottom"></div>
        </div>
      </section>


  

非常感谢

Answer 1

如果这是您的背景图片，请尝试在您的.section_feature 上设置您的background-position: fixed; 和z-index:-1;。