CSS背景图使用cover属性后无法显示图片底部区域求助

首先修复代码里的语法错误：

• CSS选择器错误：HTML中是class="banner"，所以CSS必须用.banner而非banner，否则样式无法正确绑定到元素。
• background-repeat属性缺失值和分号，应补充为background-repeat: no-repeat;，语法错误可能导致后续样式异常。

修复语法后，针对看不到图片底部房屋的问题，核心原因是background-size: cover的特性：它会保持图片比例强制填充整个容器，当容器（100vh高度的banner）与图片的宽高比不一致时，浏览器会自动裁剪图片适配。你的场景大概率是屏幕宽高比大于图片宽高比，导致图片底部被裁剪。

下面是几个可行解决方案：

方案1：调整背景图定位，优先显示底部区域 #

通过background-position强制让图片底部对齐容器底部，确保房屋部分被展示：

.banner{
    width: 100%;
    height: 100vh;
    background-image: url(./images/winter.png);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center bottom; /* 关键：锚定底部 */
    position: relative;
    text-align: center;
    background-attachment: fixed;
}

方案2：完整显示图片（会留空白） #

如果需要图片完整展示，改用background-size: contain，但容器会出现未填充的空白区域：

.banner{
    width: 100%;
    height: 100vh;
    background-image: url(./images/winter.png);
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center bottom;
    position: relative;
    text-align: center;
    background-attachment: fixed;
}

方案3：用img标签替代背景图（更灵活） #

将图片作为独立元素嵌入，通过object-fit和object-position精准控制显示区域：

HTML修改： #

<div class="banner">                   
     <img src="./images/winter.png" alt="冬季风景" class="banner-bg">
     <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>

CSS补充： #

.banner{
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
    overflow: hidden;
}
.banner-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom; /* 控制显示底部 */
    z-index: -1; /* 让图片位于导航栏下方 */
}

内容的提问来源于stack exchange，提问作者Rajesh