CSS类背景图片无法显示问题求助（附HTML/CSS代码）

嘿，我一眼就看到几个关键问题，这就帮你一一解决：

1. HTML属性使用错误（最核心问题） #

你在HTML里给div用了style属性来指定类名，但style属性是用来写内联CSS样式的，不是用来绑定CSS类的！正确绑定CSS类应该用class属性：

错误的HTML代码：

<div style="main_div"> <div style="banner"> </div><!--banner end--> </div><!--main end-->

修正后的HTML代码：

<div class="main_div"> 
  <div class="banner"> </div><!--banner end--> 
</div><!--main end-->

2. height:100% 未生效导致元素高度为0 #

你的.banner设置了height:100%，但百分比高度是相对于父元素（.main_div）的高度计算的。而.main_div没有设置明确的高度，浏览器无法确定100%对应的具体像素值，最终.banner的高度会变成0，背景图自然无法显示。

你可以任选一种方式修复：

• 给.banner设置固定高度（推荐，更直观）：

  .banner{ 
    width:100%; 
    height:300px; /* 替换成你需要的实际高度 */
    background-image: url(../img/bannerimg.png); 
    margin-top:50px;
    /* 可选：添加背景图适配属性 */
    background-size: cover;
    background-repeat: no-repeat;
  }
  

• 给父元素.main_div设置明确高度：

  .main_div{
    width: 1000px; 
    margin: auto;
    height: 500px; /* 给父元素设置高度，让子元素的100%有参考值 */
  }
  

额外提示 #

如果确认图片路径正确，修复以上两个问题后，背景图应该就能正常显示了。如果还是有问题，可以检查一下图片格式是否支持，或者用浏览器的开发者工具（F12）查看元素的背景图加载状态，看看是否有404错误。

内容的提问来源于stack exchange，提问作者İlker Çetin