在 django 中引用 css 中的图像 - CSS (1)

📌 相关文章

📜 在 django 中引用 css 中的图像 - CSS (1)

📅 最后修改于: 2023-12-03 15:07:38.827000 🧑 作者: Mango

在 Django 中引用 CSS 中的图像 - CSS

当你在 Django 中使用 CSS 控制你的网页样式时，可能需要在 CSS 文件中引用图像。本文将介绍如何在 Django 中引用 CSS 中的图像。

步骤一：将图像放入静态文件夹中

首先，将图像放入 Django 项目中的静态文件夹中。在 Django 中，静态文件夹通常位于项目根目录的 static 文件夹中，你可以根据需要自行指定。

步骤二：在 CSS 文件中引用图像

假设我们将一个名为 logo.png 的图像放入了静态文件夹中，现在我们需要在 CSS 文件中引用它。我们可以使用相对路径来指定图像的位置。

.logo {
    background-image: url("../static/logo.png");
}

上述代码中，我们使用了 url() 函数来引用图像，路径中指定了静态文件夹的位置。

步骤三：在 HTML 文件中链接 CSS 文件

最后，将上面的 CSS 文件链接到 HTML 文件中即可看到效果。

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    </head>
    <body>
        <div class="logo"></div>
    </body>
</html>

上述 HTML 代码中，我们使用了 Django 的 static 模板标签来获取 CSS 文件的路径，然后将其链接到 HTML 文件中。

现在，你已经学会了在 Django 中引用 CSS 中的图像。