我想在我的React项目中构建一个容器，其中包含一个背景图片和上面的文本。
基本上，我也已经建立了这个容器一段时间（我想）。但现在我看到，在移动终端上，因为地址栏的原因，图像在每次滚动方向改变时都会重新缩放，看起来非常破碎。
我已经读过这个thread了。然而，由于我不想在整个页面上设置图像作为背景（但仅在这个容器中），我认为这个解决方案不起作用。
我也不想使用像transition: height 999999s这样的解决方案，因为这样会在旋转屏幕时破坏网页。
出现此问题的代码如下所示：
HTML代码：

<div>
  <section>
    <h2>Container Before</h2>
    <p>SOME RANDOM TEXT</p>
  </section>
  <section className="section">
    <div className="imageContainer">
      <div className="innerContent">
        <h2>Random Text</h2>
        <p>
          Received the likewise law graceful his. Nor might set along charm
          now equal green. Pleased yet equally correct colonel not one. Say
          anxious carried compact conduct sex general nay certain. Mrs for
          recommend exquisite household eagerness preserved now. My improved
          honoured he am ecstatic quitting greatest formerly. Extended
          kindness trifling remember he confined outlived if. Assistance
          sentiments yet unpleasing say. Open they an busy they my such
          high. An active dinner wishes at unable hardly no talked on.
          Immediate him her resolving his favourite. Wished denote abroad at
          branch at. Ham followed now ecstatic use speaking exercise may
          repeated. Himself he evident oh greatly my on inhabit general
          concern. It earnest amongst he showing females so improve in
          picture. Mrs can hundred its greater account. Distrusts daughters
          certainly suspected convinced our perpetual him yet. Words did
          noise taken right state are since. You disposal strongly quitting
          his endeavor two settling him. Manners ham him hearted hundred
          expense. Get open game him what hour more part. Adapted as smiling
          of females oh me journey exposed concern. Met come add cold calm
          rose mile what. Tiled manor court at built by place fanny.
          Discretion at be an so decisively especially. Exeter itself object
          matter if on mr in. Sussex on at really
        </p>
      </div>
    </div>
  </section>
  <section>
    <h2>Container After</h2>
    <p>SOME RANDOM TEXT</p>
  </section>
</div>

CSS代码：

.section {
  background-color: black;
}

.imageContainer {
  width: 100%;
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}

.imageContainer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=2000);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 5.4% 0;
  opacity: 0.5;
}

.innerContent {
  padding: 2rem 1.5rem;
  margin: 1rem auto;
  width: 100%;

  position: relative;
  z-index: 9;
  text-align: left;
  color: white;
  opacity: none;
}
@media screen and (min-width: 768px) {
  .innerContent {
    width: 750px;
  }
}
@media screen and (min-width: 992px) {
  .innerContent {
    padding: 2rem 10rem;
    width: 980px;
  }
}
@media screen and (min-width: 1200px) {
  .innerContent {
    width: 1170px;
  }
}
@media screen and (min-width: 1400px) {
  .innerContent {
    width: 1370px;
  }
}

提前感谢任何帮助！
最好的问候，布莱恩