背景图像不想在css中加载答案

【问题标题】：Background image does not want to load in css背景图像不想在css中加载
【发布时间】：2021-11-07 14:01:27
【问题描述】：

我正在用 Django 创建一个网站。我在互联网上下载了一个 html 主页模板设计，我想改进并用于我的网站。由于它的设计它带有一个 CSS 文件。现在，当我尝试进行改进时，专门在其中一个元素中添加背景图像。它拒绝这样做。其他元素响应 CSS 样式，但背景图像也拒绝。因为我使用的是 Django，所以我必须设置静态文件并“收集静态”，但是当我在我的 CSS 中将这些图片设置为我的背景图像时，它会拒绝。这是html文件和css。

html

<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
 <head>
  <meta charset="UTF-8">
  <title> Home </title>
  <link rel="stylesheet" href="{% static 'style.css' %}">
  <!-- Boxicons CDN Link -->
  <link href= 
 'https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' 
  rel='stylesheet'>
 <meta name="viewport" content="width=device-width, initial- 
  scale=1.0">
</head>

<section class="home-section">
  <div class="main" >
    
  </div>

class="main" 也是我尝试添加背景图像的地方。

CSS

.home-section .main{
  background-image: url('https://www.pexels.com/photo/singer- 
  singing-on-stage-beside-guitar-player-and-bass-player- 
  167636/');
  padding: auto;
  margin: auto;
  background-size: 50pc;
 }
@media (max-width: 700px) {
.sidebar li .tooltip{
display: none;
 }
 }

我已经尝试了所有方法，但它拒绝获取。提前致谢。

【问题讨论】：

您的背景图片网址无效。您必须提供连接到图像的有效链接，该链接将端口链接到 pexels 网页。
这个链接不是我以前使用的。我现在刚刚尝试过，但也失败了，但以前，因为我的应用程序的静态文件夹中有这张图片，所以我一直在尝试使用它，但它拒绝了。
尝试调整 html、body 和 .home-section 的大小
它仍然无法正常工作我开始怀疑模板有问题。

标签： html css django flexbox css-selectors

【解决方案1】：

加载静态或非空 div

在不知道你还有什么代码的情况下，我只能猜测你可能忘记加载静态文件，将其包含在 html 文件的顶部：

{% load static %}

其次，在 div 被填充之前，它没有尺寸，所以图像也不会占用空间。

【讨论】：