我有一個 css 背景影像，我顯示為封面，以便它覆寫整個螢屏，但它不顯示影像的下半部分。
使用了這張圖片：https ://pixabay.com/vectors/winter-landscape-houses-background-2840549/
無法看到螢屏下方的白色房屋。
使用 chrome 瀏覽器。
CSS 代碼：
banner{
width: 100%;
height: 100vh;
background-image: url(./images/winter.png);
background-size: cover;
background-repeat:
position: relative;
text-align: center;
background-attachment: fixed;
}
任何幫助表示贊賞。
編輯：html代碼
<div class="banner" >
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
uj5u.com熱心網友回復：
body{
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}uj5u.com熱心網友回復：
嘗試更改background-size: cover;為background-size: contain;然后background-size: 100% 100%;適應 100% 寬度。
body {
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
background-size: 100% 100%;
}
uj5u.com熱心網友回復：
你遇到的問題是你的影像的高度在特定點大于容器（body 元素）的高度取決于當前視口高度，這會導致你的影像被裁剪。
您可以嘗試background-size: contain影像將縮放的位置并嘗試適合容器以保持縱橫比不受干擾。在這里你保證你的影像不會被裁剪，但你需要考慮為每個設備螢屏尺寸改變影像（回應式設計影像）。
有很多方法可以解決這個問題，但您需要找到適合您設計的方法，或者找到適合您容器的影像。
查看這篇關于回應式設計影像的w3schools文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537405.html
標籤：网页格式CSS