我不知道如何讓 html 和 css 中的背景圖像填充在導覽列和頁腳下方。當我滾動導航列的空間只是一個空白時，我希望它滾動時頂部和底部沒有空間。謝謝！
* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; height: auto; } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }
我嘗試更改 css 和 html 上的程式碼，但似乎沒有任何改變結果。
我在對您的問題的評論中建議將背景圖像應用於
移到頁面頂部即可。body，但我無法想像您將如何以這種方式應用不透明度。因此，只需將* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; height: auto; } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }我不知道為什麼你創建了一個新元素來放置BG 圖像，而不是僅僅將其放在
標籤上，但你的問題是因為在小螢幕上您在.background-container元素上設定height:auto的尺寸。您已經建立了一個元素，將其固定位置，然後將其設為 100% 高、100% 寬。當螢幕尺寸較小且您設定
height:auto時，該元素的高度為0px，因為該元素內部沒有任何內容。* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; /*height: auto;*/ /* <======= REMOVE THIS */ } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }