时间戳

首页 > 解决方案 > 在网站的不同页面上放置不同的背景图像

python - 在网站的不同页面上放置不同的背景图像

问题描述

您好，所以我正在使用 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 %}

标签： pythonhtmlcssdjango

解决方案

选项1

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

根.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">…&lt;/body>

和：

<body class="search-results">…&lt;/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);
}

推荐阅读