CSS 背景圖片在 div 中不顯示的根本原因：塊級元素無內容高度為零的佈局原理

現象

body 設置背景圖正常，div 同樣設置卻不顯示，除非額外指定 width/height。

原因

div 是塊級元素，默認 width: 100%，height: auto（由內容撐開）。若 div 內無內容或內容脫離文檔流（float/absolute），高度塌陷為 0，背景圖雖然繪製但可視區域高度為 0，故不可见。

解決方案

1. 顯式設置高度：height: 200px; 或 min-height: 200px;。
2. 添加內容撐開：放入文字、圖片或  。
3. 偽元素佔位（推薦響應式）：

   .bg-div::before {
       content: "";
       display: block;
       padding-top: 56.25%; /* 16:9 比例 */
       background: url(...) no-repeat center / cover;
   }

4. overflow: hidden：包含浮動子元素時撐開高度（需子元素浮動）。

代碼示例

<div class="bg-div"></div>

<style>
.bg-div {
    background: url("../photo/banner1.jpg") no-repeat center / cover;
    min-height: 300px; /* 方案 1 */
}
/* 或方案 3 */
.bg-div::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    background: inherit;
    background-size: cover;
    background-position: center;
}
</style>

body 不同之處

body 由瀏覽器自動鋪滿視口，擁有默認高度（視口高度），故背景圖直接可見。