Question

`

.testimonials {background: url('./images/s8.png'); padding:55px 0; overflow:hidden; }

`Am使用django 2.1在显示在我的css文件夹中设置样式的背景图像时出现问题我已经尝试过

.testimonials {background: url("/static/images/s8.png"); padding:55px 0; overflow:hidden; }

并且进行内联自定义均无效，请帮助

<div class="testimonials" style="background: url({% static "images/s8.jpg" %})">

Answer 1

在CSS文件中使用背景图片不需要静态块。只需确保路径与文件夹正确匹配即可。使用./返回路径映射。

foreach($array as $key=>$value){
    ${"var_$key"}  = $value;
}

echo "variable no 1 is = $var_1, variable no 50 is = $var_50, and variable no 90 is = $var_90";

我的CSS文件位于CSS文件夹中，图像位于images文件夹中。所以我用了这个。

css/base.css
images/slide1Back.png

Answer 2

首先，请确保已将以下行添加到html文件中：

{% load staticfiles %}

然后将其放入您的settings.py：

STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

现在一切都可以正常工作！

更新

这是我的profile.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Profile</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">

</head>
<body>

<!-- SUBHEADER -->
<div id="subheader" class="about">
    <div class="subheader-text">
        <h1>A unique cloud hosting provider</h1>
        <h2>Our efforts and focus are always directed to our clients and their needs</h2>
    </div>
</div>
<!-- END OF SUBHEADER -->
</body>
</html>

和我的style.css

#subheader.about {
    background: url("../images/s8.jpg") center center no-repeat;
    padding: 100px 25px;
}

#subheader.about:after {
    background: rgba(34, 43, 50, .9);
    bottom: 0px;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

请注意，我使用../代替./

这是我的树： tree

，这是结果： result view

Answer 3

我在这里使用的模板是about.html

{% extends "base.html" %}
{% load static %}
{% block Content %}

<!-- SUBHEADER -->
<div id="subheader" class="about">
  <div class="subheader-text">
    <h1>A unique cloud hosting provider</h1>
    <h2>Our efforts and focus are always directed to our clients and their needs</h2>
  </div>
</div>
<!-- END OF SUBHEADER -->

<!-- DESCRIPTION -->
<div class="about-descr">
  <div class="row">
    <div class="col-sm-12 col-md-10 center-block">
      <h3>WHAT ARE WE ALL ABOUT?</h3>
      <div class="titleborder centered">
        <div class="titleborder_left"></div>
        <div class="titleborder_sign"></div>
        <div class="titleborder_right"></div>
      </div>
    </div>
  </div>
  <div class="row spacing-25">
    <div class="col-sm-12 col-md-7">
      <img src="images/about-us.jpg" alt=""/>
    </div>
    <div class="col-sm-12 col-md-5">
     <p class="topspacing">We work hard to provide Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa. </p>
      <p>Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa..</p>
    </div>
  </div>
</div>
<!-- END OF DESCRIPTION -->

<!-- ABOUT ICONS -->
<div class="about-icons">
  <div class="row">
    <div class="col-sm-3"><img src="images/icon17.png" alt=""/><p>CHOOSE</p></div>
    <div class="col-sm-3"><img src="images/icon18.png" alt=""/><p>SCALE</p></div>
    <div class="col-sm-3"><img src="images/icon19.png" alt=""/><p>LAUNCH</p></div>
    <div class="col-sm-3"><img src="images/icon20.png" alt=""/><p>USE</p></div>
  </div>
</div>
<!-- END OF ABOUT ICONS -->

{% endblock Content%}

这是我的CSS

  ======================== */
  #subheader.about {background: url("../images/s8.jpg") center center no-repeat; padding:100px 25px;}
  #subheader.about:after { background: rgba(34,43,50,.9); bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }

可以告诉您哪里出了错或在这里遗漏了什么这是图像项目/djangoprojects/static/images/s8.jpg的路径

Answer 4

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="description" content=" ">
  <meta name="keywords" content="">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>| Web  | Software </title>
  <link rel="shortcut icon" href="{% static "images/favicon.png" %}" />
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

  <!-- Bootstrap & Styles -->
  <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
  <link href="{% static "css/bootstrap-theme.min.css" %}" rel="stylesheet">
  <link href="{% static "css/block_grid_bootstrap.css" %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static "css/owl.carousel.css" %}">
  <link rel="stylesheet" href="{% static "css/owl.theme.css" %}">
  <link rel="stylesheet" href="{% static "css/animate-custom.css" %}">
  <link rel="stylesheet" href="{% static "css/flexslider.css" %}">
  <link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
  <link rel="stylesheet" href="{% static "css/slicknav.min.css" %}">
  <link href="{% static "css/style.css" %}" rel="stylesheet">
</head>

<body>
 <!-- TOP NAV -->
 <div class="topmenu">
  <div class="row">
    <div class="col-sm-3">
      <ul class="top left">
        <li><i class="fa fa-phone"></i>+666666666 Call us</li>
      </ul>
    </div>
    <div class="col-sm-9">
      <ul class="topright">
        <li><i class="fa fa-unlock-alt"></i> <a href="#" data-toggle="modal" data-target="#LoginModal">CLIENT AREA</a></li>
        <li><i class="fa fa-commenting-o"></i> <a href="javascript:void(Tawk_API.toggle())">LIVE CHAT</a></li>
        <li><i class="fa fa-hand-pointer-o"></i> <a href="/contact">Support</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- END OF TOP NAV -->

<!-- HEADER -->
<div class="header">
 <div class="row">
  <div class="col-sm-3">
    <div class="logo">
      <a href="/"><img src="{% static "images/logo.png" %}" alt="" />
      </a>
    </div>
  </div>
  <div class="col-sm-9">

    <nav id="desktop-menu">
      <ul class="sf-menu" id="navigation">
        <li class="current"><a href="#">Home</a>
          <ul>

            <li><a href="#">Billing</a></li>
              <li><a href="#">Web Design</a></li>
          </ul>
        </li>
        <li><a href="#">Hosting</a>
          <ul>
            <li><a href="/shared">Shared Hosting</a></li>
            <li><a href="/vps">Cloud VPS</a></li>
          </ul>
        </li>
        <li><a href="/domains">Domains</a></li>
        <li><a href="#">Pages</a>
          <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/datacenter">Datacenter</a></li>
          </ul>
        </li>
        <li><a href="#">Blog</a>
          <ul>
            <li><a href="/blog">hosting tips</a></li>
            <li><a href="#">Facebook</a></li>
          </ul>
        </li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>
</div>
<!-- END OF HEADER -->
{% block Content %}
{% endblock Content %}
<!-- FOOTER -->
<div class="footer">
  <div class="row">

   <div class="col-sm-3">
    <h4>CLOUD HOSTING</h4>
    <ul>
      <li><a href="#" title="">cPanel Hosting</a></li>
      <li><a href="/shared" title="">Shared Hosting</a></li>
      <li><a href="/vps" title="">Cloud VPS</a></li>
      <li><a href="#" title="">WordPress Hosting</a></li>
    </ul>
  </div>

  <div class="col-sm-3">
    <h4>HOSTING FOR APPS</h4>

    <ul>
      <li><a href="#" title="">WordPress Hosting</a></li>
      <li><a href="#" title="">Joomla Hosting</a></li>
      <li><a href="#" title="">Drupal Hosting</a></li>
      <li><a href="#" title="">Magento Hosting</a></li>
    </ul>
  </div>

  <div class="col-sm-3">
    <h4>COMPANY</h4>

    <ul>
      <li><a href="/about" title="">About Us</a></li>
      <li><a href="/privacy" title="">Privacy Policy</a></li>
      <li><a href="/aup" title="">Acceptable Usage Policy</a></li>
      <li><a href="/terms" title="">Terms & Conditions</a></li>
    </ul>
  </div>

  <div class="col-sm-3">
    <h4>NEWSLETTER SIGNUP</h4>
    <div id="mc_embed_signup">
      <form class="form-inline validate material" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
       <input id="mce-EMAIL" type="email" name="EMAIL" placeholder="E-mail" required>
       <div style="position: absolute; left: -5000px;">
        <input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
      </div>
      <input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="mtr-btn button-blue">
    </form>
  </div>
</div>
</div>
</div>
<!-- END FOOTER -->

<!-- SOCIAL & COPYRIGHT -->
<div class="social">
  <div class="row">
    <div class="col-sm-12">
     <ul class="social-links">
      <li><a href="#" title="Twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
      <li><a href="#" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>
      <li><a href="#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#" title="Github"><i class="fa fa-github-alt"></i></a></li>
    </ul>
    <p class="text-center">Copyright© . All rights reserved.</p>
  </div>
</div>
</div>
<!-- END OF SOCIAL & COPYRIGHT -->

<!-- LOGIN MODAL -->
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="LoginModal">
  <div class="modal-dialog" role="document">
    <form method="post" action="#" class="material">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i>LOGIN TO YOUR ACCOUNT</h4>
        </div>
        <div class="modal-body">
          <input type="text" name="username" placeholder="E-mail Address">
          <input type="password" name="password" placeholder="Password">
          <button type="submit" class="mtr-btn button-fab">LOGIN</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- END OF LOGIN MODAL -->

<a href="#top" id="back-to-top" class="ripple"><i class="fa fa-angle-up"></i></a>

<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.flexslider-min.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<script src="{% static "js/hoverIntent.js" %}"></script>
<script src="{% static "js/superfish.min.js" %}"></script>
<script src="{% static "js/owl.carousel.js" %}"></script>
<script src="{% static "js/ripple-effect.js" %}"></script>
<script src="{% static "js/wow.min.js" %}"></script>
<script src="{% static "js/jquery.form.min.js" %}"></script>
<script src="{% static "js/jquery.slicknav.min.js" %}"></script>
<script src="{% static "js/retina.min.js" %}"></script>
<script src="{% static "js/custom.js" %}"></script>

</body>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5933bc17b3d02e11ecc6824e/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</html>

如何在Django框架中从style.css加载背景图片

4 个答案: