我想在我的React項目中構建一個容器，它由一個背景圖像和位于其上的文本組成。

基本上，我也已經在一段時間前建立了這個容器(我想)。但現在我看到，在移動設備上，由于地址欄的原因，每次滾動方向改變時，圖像都會被重新縮放，這看起來非常糟糕。

我已經看過這個帖子了。 然而，由于我不想將圖像設置為整個頁面的背景(但只在這一個容器中)，我認為這種解決方案不可行。

我也不想使用像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;
  }
}

提前感謝任何幫助！

最誠摯的問候， 布賴恩

在CSS代碼中使用background-attachment: fixed會導致移動設備出現問題。

position: absolute;
z-index: -1;

移除背景附件，并將背景圖像完全放置在。imageContainer使用位置:absolute。

z-index屬性設置為-1，以確保。innerContent顯示在背景圖像的頂部。

您可以根據設計要求調整不透明度、填充、邊距和其他屬性。

如果您使用reactJs，那么您不必依賴于僅使用CSS(js在前面執行)的解決方案。你可以用javascript做任何事情，例如計算設備的寬度和高度，然后將這些尺寸作為背景尺寸以像素為單位傳遞。這樣當你滾動的時候，地址欄不會波動圖像的大小(比如100vh)。

其次，你可以添加一個事件監聽器來改變方向和改變圖片大小。