css - django css 背景图像 url 不起作用

标签 css django

所以我有这个标题任务类,但由于某种原因,背景图像不会显示,但是当我单击 Visual Studio 代码中的 url 时,它会显示该 url 中的图像。有谁知道我的代码有什么问题吗?谢谢

 .header-task{
  background-image: url("..\image\nightlandscape.jpg");
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

这是我点击 URL 图像时 Visual Studio 代码的图片

my structure file

最佳答案

我做了一些挖掘,但就我个人而言,我没有环境来测试它。所以你可能需要自己检查一下。

您可以尝试以下操作吗:

 .header-task{
  background-image: url("static(image/nightlandscape.jpg"));
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

如果您的 STATIC_URL 是“/static/”(我相信它位于 settings.py 中),则这将呈现为:

 .header-task{
  background-image: url("/static/image/nightlandscape.jpg");
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

另一种可能性:

 .header-task{
  background-image: url('{% static 'nightlandscape.jpg' %}') or url('{% static "/img/nightlandscape.jpg" %}')
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

但为此,我认为您需要首先加载静态文件:HTML中的{% load static%},然后加载样式表。

<head>
    <style>
        {% include "path/to/my_styles.css" %}
    </style>
</head>

可能只是将 url("..\image\nightlandscape.jpg") 更改为 url("../image/nightlandscape.jpg")

关于css - django css 背景图像 url 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62482033/

相关文章:

html - 表单中各列之间的连字符

html - 使用 Flexbox 的等高卡片

CSS3 动画 : inherit property for keyframe at 0%

mysql - django 中的运行时警告

python - 在 Django 中运行并与后台进程通信

javascript - 用于按钮 phonegap 的 Jquery 移动自定义图标

html - 表格标题已修复,但边框在 chrome 上移动并且不会出现在 firefox 上

python - Django Python 休息框架,在 chrome 中请求的资源上不存在 'Access-Control-Allow-Origin' header ,在 firefox 中工作

python - Django Rest框架APIView所有方法的代码相同

python - 使用带有自定义用户模型和 UserManager 的 python-social-auth 创建 django 用户时出现问题