全屏背景圖片 - 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>

鏈接到網站

Answer 1

你的問題來自：

1. 為什么“團隊”部分頂部和底部有間隙

這來自你的填充

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

2. 為什么我的背景圖片不是全屏的

這來自height: 100vh您在.team-section中設置的 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>

如果您檢查瀏覽器檢查器，您會發現.grve-element （標題文本“團隊”）在代碼中實際的.team-section之前占用了空間。 該元素具有白色背景。

因此，您的.team-section樣式並不重要。 這更像是一個 HTML 結構問題。

有兩個方向可以解決這個問題：

1. 如果您可以控制整體 HTML，只需將 your.team-section 背景 css 設置移動到.grve-column級別； 或者
2. 通過將其設置為“位置：絕對；寬度：100%；”，使.grve-element高度為 0。 你需要給.team-images-mobile一些填充，這樣它們就不會與“團隊”重疊。