iPhone上的全屏背景圖片模糊

Question

我嘗試使全屏背景圖像成為主要部分。 它適用於Android設備，但不適用於iPhone。 取而代之的是，全屏背景圖像只占圖像的一小部分。

我有下一個主要部分的html代碼：

<div id="main" class="parallax-100-percents full-page-img h-100"
     style="background-image: url(resources/img/main/desc-with-flowers-100-m.jpg)">
    <div class="container h-100">
       ...
    </div>
</div>

和喜歡的風格班：

.parallax-100-percents {
  /* Set a specific height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background: no-repeat fixed center;
  background-size: cover;
}

.full-page-img {
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background: no-repeat center;
  background-size: cover;
}

您可以嘗試一下http://your-event.store

Answer 1

代替使用height: 100% ，嘗試使用vh單位，該單位考慮了屏幕的大小。 height: 100vh例如height: 100vh 。

.parallax-100-percents {
  /* Set a specific height */
  height: 100vh;
  /* Create the parallax scrolling effect */
  background-image: url(resources/img/main/desc-with-flowers-100-m.jpg);
  background: no-repeat fixed center;
  background-size: cover;
}

.full-page-img {
  /* Full height */
  height: 100vh;
  /* Center and scale the image nicely */
  background: no-repeat center;
  background-size: cover;
}

我從您的HTML文件中刪除了樣式標簽。 將所有樣式保留在css文件中是一個好習慣。

Answer 2

從#main元素中刪除h-100類，然后嘗試。