背景图像不想在css中加载

Posted

技术标签:

【中文标题】背景图像不想在css中加载【英文标题】：Background image does not want to load in 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 的大小 它仍然无法正常工作我开始怀疑模板有问题。 【参考方案1】：

加载静态或非空 div

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

% load static %

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

【讨论】：

以上是关于背景图像不想在css中加载的主要内容，如果未能解决你的问题，请参考以下文章

JQuery/CSS - 基于值的不同 <body> 背景图像，无需在 _Layout 页面上的 document.ready() 中加载

使用 <picture> 元素防止在移动浏览器中加载标题背景图像

我的控制器索引视图的背景图像未在 rails 4 应用程序中加载？

在缓存中加载 Div 背景图像 [重复]

UIImageView 和 UIButton 背景图像在模拟器中加载时变黑

如何在 iPhone 应用程序的 UITableCell 中的背景中加载图像