在网站的不同页面上放置不同的背景图像答案

【问题标题】：putting a different background image on a different page in a website在网站的不同页面上放置不同的背景图像
【发布时间】：2020-04-26 02:01:00
【问题描述】：

您好，我正在使用 django 模板制作网站。到目前为止，只有主页有背景图片，我想在单独的页面上放置不同的图片。 Django 模板让我使用“扩展基本 html”。我一直在尝试插入不同的背景页面来替换 search_results.html 上的通用白色背景页面，但代码不起作用。我希望我的 search_results.html 具有与 home.html 不同的背景。感谢您的帮助！

代码：我只会在每个 html 的头部包含那些代码，以确保不会放置太多关于正文的代码

Base.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>
        {% block title %}
            My Site
        {% endblock title %}
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->

    <link href="{% static 'css/bootstrap/bootstrap.min.css' %}" rel="stylesheet">

    <link href="{% static 'css/signinform.css' %}" rel="stylesheet">

    <!-- Add your custom CSS to this file -->
    <link href="{% static 'css/custom.css' %}" rel="stylesheet">

{% block additional_styles %}
 <style>
     body {background-image: url(./static/images/golden_gate_bridge.jpg);
}
    </style>
{% endblock %}

</head>

Home.html（这个使用了base.html中的图片是正确的）

{% extends "base.html" %}

{% block additional_styles %}
<style>
    body {
        background-image: url(./static/images/golden_gate_bridge.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>
{% endblock %}

search_results.html（需要背景更改！）

{% extends "base.html" %}

{% block title %}
    Search Results
{% endblock title %}

{% block additional_styles %}
<style>
    body {
        background-color: white;
    }
</style>
{% endblock %}

【问题讨论】：

标签： python html css django

【解决方案1】：

选项 1

此选项使用CSScustom property，可让您保持结构不变。您将在 <style> 块内覆盖每个单独页面的自定义属性（在您的根目录中设置，共享 CSS 文件）。

root.css

:root {
  /* Define this in your global CSS */
  --bg-url: './static/images/golden_gate_bridge.jpg';
}

body {
  background-image: url(var(--bg-url);
}

现在，每当您更新 --bg-url 时，都会动态更新背景。

search_results.html

<style>
  /* Override default background image */
  body {
    --bg-url: './static/images/search_results_img.jpg';
  }
</style>

又是 other_page.html：

<style>
  /* Override default background image */
  body {
    --bg-url: './static/images/other_page_img.jpg';
  }
</style>

选项 2

在您的布局中的某处，您包含了一个body 标记。我会在其中包含页面名称并从全局文件中设置背景样式。

<body class="home">…</body>

还有：

<body class="search-results">…</body>

然后，相应地调整您的CSS：

/* base */
body {
  background-size: cover;
  background-repeat: no-repeat;   
}

.home {
  background-image: url(./static/images/golden_gate_bridge.jpg);
}

.search-results {
  background-image: url(./static/images/search-image.jpg);
}

【讨论】：

我更喜欢选项 2。