为什么即使我使用静态也无法添加背景图片答案

【问题标题】：Why does I can't add background image even I use static为什么即使我使用静态也无法添加背景图片
【发布时间】：2021-08-21 14:34:30
【问题描述】：

我尝试为我的 django 网站添加背景图像，但它根本不起作用。我也使用 stackoverflow 的这个答案stackoverflow question link。但它不起作用。我还将更改迁移到数据库。我尝试像在 css 方法 background-image: url("images/background.png"); 中一样添加背景图像。它也不起作用。如果您知道解决此问题的方法或知道另一种方法，请告诉我

    {% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Dinindu Theekshana</title>

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700"
      rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <td class="tdStyle"> 
    <style>
      body {
        font-family: "Roboto", sans-serif;
        font-size: 17px;
      }
      .tdStyle{
        background-image:url('{{ STATIC_URL }}images/sample.JPG');
        background-repeat:no-repeat;
        background-size:100%;
      }
    .shadow{
           box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
       }
      .btn-danger {
        color: #fff;
        background-color: #f00000;
        border-color: #dc281e;
      }
     
     .masthead {
              background:#3398E1;
              height: auto;
              padding-bottom: 15px;
              box-shadow: 0 16px 48px #E3E7EB;
              padding-top: 10px;
    }
      #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        }
        #navbar {
          overflow: hidden;
          background-color: #333;
          color: #333;
          z-index: 9999999;
        }
        #navbar a:hover {
          background-color: #ddd;
          color: black;
        }

        #navbar a.active {
          background-color: #294bc5;
          color: white;
        }

        .content {
          padding: 16px;
          padding-top: 50px;
        }

        .sticky {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
        }

        .sticky + .content {
          padding-top: 60px;
        }
    </style>

    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
      <div id="navbar">
        <a class="active" href="{% url 'home' %}">Home</a>
        <a href="#">News</a>
        <a href="javascript:void(0)">Contact</a>
      </div>    
      <script>
      window.onscroll = function() {myFunction()};

      var navbar = document.getElementById("navbar");
      var sticky = navbar.offsetTop;

      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add("sticky")
        } else {
          navbar.classList.remove("sticky");
        }
      }
      </script>
    </nav>
            {% block content %} 
          <!-- Content Goes here -->
            {% endblock content %}
    
    <!-- Footer -->
    <footer class="py-3 bg-grey">
              <p class="m-0 text-dark text-center ">Copyright &copy; Dinindu Theekshana</p>
    </footer>
    
  </body>
</html>

【问题讨论】：

你是 django 新手吗？

标签： javascript python html css django

【解决方案1】：

在 Django 中，您在呈现页面时添加 URL。因此，对于导航栏中的链接，它看起来像这样：

<a class="active" href="{% url 'home' %}">Home</a>
<a href="{% url 'news' %}">News</a>
<a href="{% url 'contact' %}">Contact</a>

然后您需要为这些页面编写视图并将它们添加到您的 urls.py。

【讨论】：

【解决方案2】：

我找到了一种方法，首先你必须进入你的 setting.py 文件并添加这个代码STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'templates').replace('\\','/'), ] 然后打开你的 base.html 文件并尝试这个。希望它有效。如果你需要更多信息，请使用这个article

`{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Dinindu Theekshana</title>

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700"
      rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <style>
      body {
        font-family: "Roboto", sans-serif;
        font-size: 17px;
        background-image: url("{% static "images/sun-pattern.png" %}");
      }
    .shadow{
           box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
       }
      .btn-danger {
        color: #fff;
        background-color: #f00000;
        border-color: #dc281e;
      }
     
     .masthead {
              background:#3398E1;
              height: auto;
              padding-bottom: 15px;
              box-shadow: 0 16px 48px #E3E7EB;
              padding-top: 10px;
    }
      #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        }
        #navbar {
          overflow: hidden;
          background-color: #333;
          color: #333;
          z-index: 9999999;
        }
        #navbar a:hover {
          background-color: #ddd;
          color: black;
        }

        #navbar a.active {
          background-color: #294bc5;
          color: white;
        }

        .content {
          padding: 16px;
          padding-top: 50px;
        }

        .sticky {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
        }

        .sticky + .content {
          padding-top: 60px;
        }
    </style>

    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
      <div id="navbar">
        <a class="active" href="{% url 'home' %}">Home</a>
        <a href="#">News</a>
        <a href="javascript:void(0)">Contact</a>
      </div>    
      <script>
      window.onscroll = function() {myFunction()};

      var navbar = document.getElementById("navbar");
      var sticky = navbar.offsetTop;

      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add("sticky")
        } else {
          navbar.classList.remove("sticky");
        }
      }
      </script>
    </nav>
            {% block content %} 
          <!-- Content Goes here -->
            {% endblock content %}
    
    <!-- Footer -->
    <footer class="py-3 bg-grey">
              <p class="m-0 text-dark text-center ">Copyright &copy; Dinindu Theekshana</p>
    </footer>
    
  </body>
</html>
`

【讨论】：