Django项目中CSS设置class为main的元素背景图无法加载如何解决

修复方案 #

问题根因1：空元素无渲染空间 #

你当前的.main元素是空节点，没有设置固定宽高，也没有内部内容撑开高度，元素实际高度为0，背景图就算加载成功也无法显示。需要给.main显式设置宽高属性：

.home-section .main{
  width: 100%;
  min-height: 80vh; /* 可按需调整高度，用vh单位可以自适应视口高度 */
  /* 其余原有属性 */
}

问题根因2：外链地址无效 #

你填写的url是图片详情页地址，不是图片资源直链，无法直接作为背景图资源加载。如果要用网络图片，需要右键对应图片选择「复制图片地址」，获取后缀为jpg/png/webp等格式的资源直链填入。

问题根因3：本地静态图片路径配置错误 #

Django的{% static %}模板标签仅在HTML模板文件中生效，独立CSS文件不会被Django模板引擎解析，所以用本地静态图片时要写相对路径：
假设静态文件目录结构如下：

static/
  ├── style.css
  └── images/
      └── bg.jpg

CSS中背景图路径写为：

background-image: url('./images/bg.jpg');

完整修复后CSS示例 #

.home-section .main{
  width: 100%;
  min-height: 80vh;
  margin: 0 auto;
  /* 替换为你自己的图片直链或者本地相对路径 */
  background-image: url('./images/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 }
@media (max-width: 700px) {
  .sidebar li .tooltip{
    display: none;
  }
}

注：原CSS中的padding: auto是无效属性，padding不支持auto值，可直接删除或者替换为具体数值

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