размещение другого фонового изображения на другой странице веб-сайта - PullRequest
Новая
       9

размещение другого фонового изображения на другой странице веб-сайта

1 голос
/ 26 апреля 2020

Здравствуйте, поэтому я использую django шаблонизацию для создания сайта. Пока что только домашняя страница имеет фоновое изображение, и я хочу разместить другое изображение на отдельной странице. Django В шаблонах я использую "расширяет базу html". Я продолжаю пытаться вставить другую фоновую страницу, чтобы заменить общую c белую фоновую страницу на search_results. html, но код не работает. Я хочу, чтобы мои search_results. html имели другой фон, чем дома. html. Цените помощь!

Код: я включу только те, что на голове каждого html, чтобы обеспечить не слишком большой код для тела

База. 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 (в этом изображении используется базовое изображение. 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 %}

1 Ответ

2 голосов
/ 26 апреля 2020

Опция 1

Эта опция, которая использует CSS пользовательское свойство , позволяет вам сохранять структуру как есть. Вы должны переопределить пользовательское свойство (установленное в вашем root, совместно используемом CSS файле) каждой отдельной страницы в вашем блоке <style>.

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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...