刪除標籤後保留背景圖片

我正在通過設計網頁來了解webdev，並希望登錄頁面具有背景圖像，但後續頁面不適用。我的index.html頁面擴展了base.html模板。我使用body標籤來應用背景圖片來覆蓋頁面。但我想從results.html視圖中刪除，因此在results.html我使用header.html擴展僅標頭視圖。在header.html佈局中，我消除了body標記，但背景圖像仍然以某種方式保留。刪除標籤後保留背景圖片

任何幫助初學者非常感謝。

base.html文件

{% load staticfiles %} 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>me</title> 

    <!-- Bootstrap core CSS --> 
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="{% static 'css/cover.css' %}" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
     <!-- Static navbar --> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Logo</a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="./">About Us <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Log In</a></li> 
       <li><a href="#">Sign Up</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav>  

    {% block main_content %} 
    {% endblock %} 

      <div class="mastfoot"> 
      <div class="inner"> 
       <p>me, 2016 | <a href="https://twitter.com/me">@me</a></p> 
      </div> 
      </div> 

     <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="../../dist/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 


</body> 



</html>

的index.html

{% extends "search/base.html" %} 

{% block main_content %} 

    <div class="site-wrapper"> 

     <div class="site-wrapper-inner"> 

     <div class="cover-container"> 
      <div class="inner cover"> 
      <h1 class="cover-heading"></h1> 
      <p class="lead col-xs-6 ">Search 
       <input type="text" class="form-control" placeholder=""> 
      </p> 
      <p class="lead col-xs-6 ">Location 
       <input type="text" class="form-control" placeholder="City, State or Zipcode"> 
      </p> 
      <p class="lead"> 
       <a href="#" class="btn btn-lg btn-default">Search</a> 
      </p> 
      </div> 

     </div> 

     </div> 

    </div> 

    {% endblock %}

了header.html

{% load staticfiles %} 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>me</title> 

    <!-- Bootstrap core CSS --> 
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="{% static 'css/cover.css' %}" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<div> 

{% block main_content %} 
{% endblock %} 


</div> 




    <!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<script src="../../dist/js/bootstrap.min.js"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 

</html>

來源

2016-08-23 Jebediah15

所有網頁需要<body>元素，所以你不能離開它。有很多方法可以解決這個問題，但它們都是圍繞在結果頁面上放置最後加載的css來告訴它沒有背景圖像。

用於演示的權利之前在header.html中你</head>標籤添加代碼

<style> 
body {background-image: none;} 
</style>

來源

2016-08-23 20:54:07 dprogramz

謝謝。我認爲這意味着'body'在這裏覆蓋了'body' css？準確地說是 – Jebediah15

。如果你願意的話，你實際上可以有一個頁面特定的樣式表。只需在主樣式表之後加載它。 CSS規則基於最後列出的規則取得優勢。 – dprogramz

刪除標籤後保留背景圖片

回答

相關問題