全屏背景图片 - Wordpress

Question

我有一个带有全屏滚动部分的 1 页网站。 每个部分在桌面上都能正确显示，但在移动设备上，“团队”部分的顶部和底部都有一个白色块。

我为团队制作了另一个部分（'team2test'），仅在移动设备上使用 - 使用 HTML 尝试使部分全高，但背景图像不是全屏

请协助解释为什么“团队”部分的顶部和底部有间隙 - 或者为什么我的背景图片在“team2test”中不是全屏

“team2Test”的代码：

body,
html {
  height: 100%;
  margin: 0;
}

.team-images-mobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 200px;
  height: 200px;
}

.team-section {
  background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">

  <div class="team-images-mobile">
    <img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
    <img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
    <img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
  </div>


</div>

Link to site

Answer 1

您的问题来自：

1. 为什么“团队”部分的顶部和底部有间隙

这来自你的填充

.team-images-mobile {
  padding: 10px;
}

1. 为什么我的背景图片不是全屏

这来自你在.team-section中设置的height: 100vh

body,
html {
  height: 100%;
  margin: 0;
}

.team-images-mobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

.team-section {
  background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.team-section img {
    width: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">

  <div class="team-images-mobile">
    <img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
    <img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
    <img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
  </div>


</div>

Answer 2

“团队部分”的 HTML 现在如下所示：

<div class="grve-column wpb_column grve-column-1">
    <div class="grve-column-wrapper">
        <div class="grve-element grve-text">
            <h2 style="text-align: center;">Team</h2>
        </div>
        <div class="wpb_raw_code wpb_content_element wpb_raw_html">
            <div class="wpb_wrapper">
                <div class="team-section">
                    <div class="team-images-mobile">
                       ...
                    </div>
                </div>
            </div>
        </div>
        <div class="grve-empty-space grve-height-1x" style=""></div>
    </div>
</div>

如果您签入您的browser inspector，您会发现.grve-element（标题文本“团队”）在您的代码中实际.team-section 之前占用了空间。并且该元素具有白色背景。

所以你的.team-section 风格并不重要。这更像是一个 HTML 结构问题。

有两个方向可以解决这个问题：

1. 如果您可以控制整体 HTML，只需将 .team-section 背景 css 设置移动到 .grve-column 级别；或
2. 将.grve-element 高度设为0，将其设置为“位置：绝对；宽度：100%；”。您需要为 .team-images-mobile 提供一些填充，以免它们与“团队”重叠。