欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

用Django在css文件中使用背景圖片的方法

CSS

我想使用一個(gè)圖像文件作為Django的背景圖像。但是我不知道怎么做。 首先，我讀了這篇文章，并試著把它寫成一個(gè)css文件。

#third{
    background: url("img/sample.jpeg") 50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

但這不起作用。

{% load staticfiles %}
#third{
    background: url({% static "img/sample.jpeg" %}) 50% 0 no-repeat fixed;
}

和

#third{
    background: url("../img/sample.jpeg") 50% 0 no-repeat fixed;
}

也不工作。

當(dāng)你在css文件上使用背景圖片時(shí)，你通常怎么寫css文件？你能給我一些建議嗎？

C:\~~~~~~> dir hello\static\img
2016/09/28  19:56             2,123 logo.png
2016/09/24  14:53           104,825 sample.jpeg


C:\~~~~~~> dir hello\static\css
2016/09/29  20:27             1,577 site.css


C:\~~~~~~> more lemon\settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)


C:\~~~~~~> more hello\templates\base.html
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/site.css" %}" />

Django版本:1.9.2

用這個(gè):

#third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

這很可能會(huì)奏效。在圖像URL前使用“/static/”，然后嘗試使用它們。謝謝

確保django.contrib.staticfiles包含在INSTALLED_APPS中。

在您的settings.py文件中定義STATIC _ URL:STATIC _ URL = '/STATIC/'

{% load static %}
     <img src="{% static "my_app/example.jpg" %}" alt="My image"/>

或者

#third{
          background: url('{{ STATIC_URL }}my_app/example.jpg'
     }

由于一些我無(wú)法解釋的原因，這個(gè)公認(rèn)的答案對(duì)我來(lái)說(shuō)并不適用。(本想用一張圖作為全身的封面圖)。

然而，這里有一個(gè)對(duì)我有用的選擇，對(duì)任何人來(lái)說(shuō)，可能對(duì)將要遇到的人有用。

在一個(gè)位于靜態(tài)文件目錄中的css文件中，我寫了以下內(nèi)容:

CSS:

body {
  background: url(../main/img/picture-name.jpg); 
}

您不必在css文件中包含*'{% load static %}'*。

HTML:

在頂部包含{%load static%}

創(chuàng)建一個(gè)鏈接href到style，如下所示。

& ltlink href = ' { % static "/main/home . CSS " % } ' rel = ' style sheet ' type = ' text/CSS ' & gt；

我相信你們大多數(shù)人都在使用單獨(dú)的。你的風(fēng)格的css文件。 這里有一個(gè)簡(jiǎn)單的解釋:

您需要在settings.py文件中設(shè)置STATIC_URL = '/static/'來(lái)告訴Django在哪里可以找到您的靜態(tài)文件。此外，你可能已經(jīng)知道這一點(diǎn)，因?yàn)槟阋呀?jīng)走了這么遠(yuǎn)來(lái)尋找答案。但是給你:

您需要在模板中包含{% load static %}。

現(xiàn)在，您想要為一個(gè)元素設(shè)置背景圖像。下面是一個(gè)靜態(tài)文件夾結(jié)構(gòu)示例:

static
│
├───css
│   ├───accounts
│   └───homepage
│           top.css
├───img
│       top-image.png
└───js
        dropdown.js

從top.css文件中，您希望訪問(wèn)img/top-image.png文件。以下是你所有的選擇:

/* The best option because it also works with cloud storage services like AWS*/
   .my-element {
       background-image: url("/static/img/top-image.png");
    }

/* It works when Django is serving your static files from local server, not recommended for production*/
   .my-element {
       background-image: url("../../img/top-image.png");
    }

其余的例子假設(shè)您正在編寫內(nèi)聯(lián)樣式或內(nèi)部& ltstyle & gt標(biāo)簽(不在單獨(dú)的。css文件)

/* Because it is inside your template, Django can translate `{{STATIC_URL}}`  into a proper static files path*/
   .my-element {
       background-image: url("{{STATIC_URL}}img/top-image.png");
    }

/* Similarly you can use {% static 'static_path' %} inside your template with no issues*/
   .my-element {
       background-image: url("{% static 'img/top-image.png' %}");
    }

這就是從css中訪問(wèn)靜態(tài)文件的許多可能的方法。

這里是我的項(xiàng)目的目錄結(jié)構(gòu)，所以你可以在我為什么使用我正在使用的URL的背景下，所以你可以適應(yīng)你的項(xiàng)目。 根目錄是包含項(xiàng)目和應(yīng)用程序的文件夾。我有4個(gè)應(yīng)用程序(contacto，galeria，inicio，mapa)和& quotWebCalistenia & quot這是創(chuàng)建項(xiàng)目時(shí)生成的文件夾。在那里我有一個(gè)靜態(tài)文件夾，里面有一個(gè)被稱為父親的孩子。WebCalistenia & quot)有兩個(gè)孩子& quot/css"和& quot/img & quot；

在此輸入圖像描述

這是對(duì)我有用的。 首先你必須在你的HTML上{% load static %}。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
...

現(xiàn)在你將鏈接CSS到HTML

<link rel="stylesheet" href="{% static 'app_name/css/document.css' %}">

最后，在css文件上，您將編寫:

background: url("../img/image_name.jpeg");

在Django鏈接的開頭和結(jié)尾加上撇號(hào)，應(yīng)該就可以了。

background: url('{% static "img/sample.jpeg" %}') 50% 0 no-repeat fixed;

也許你的url路徑是不正確的，如果它是正確的，使你的。css文件靜態(tài)，在運(yùn)行服務(wù)器后，確保您清除所有緩存的圖像和文件，您可以通過(guò)按Ctrl+Shift+Del并勾選“緩存的圖像和文件”來(lái)清除緩存。

身體標(biāo)簽中的base.html

<body>

{% load static %}

    </body>

style.css

#third{
    background: url("/static/img/sample.jpeg")  50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

問(wèn)題解決方案

你好，我有一些問(wèn)題，我使用pycharmS作為工具，這就是我如何設(shè)法解決問(wèn)題 顯然，您必須在html文件中加載static，并為

如果一切都做得很好，但問(wèn)題是在css文件 您的圖像在靜態(tài)文件夾下的img文件夾中 你必須這樣做: 背景:Url(& quot；../img/myimage.jpeg");這是你形象的一部分 不要將背景的所有設(shè)置代碼放在同一行

背景-重復(fù):不重復(fù)；

背景-附件:固定；

背景-位置:中心；

你用CHROME之類的瀏覽器打開你的項(xiàng)目，我用的是微軟EDGE，我的項(xiàng)目沒(méi)有同時(shí)應(yīng)用任何更改

我認(rèn)為最好的方法

我也有同樣的問(wèn)題。只要確保你的圖片在你的CSS目錄中。因?yàn)槟阌脅% load static %}在HTML中加載CSS文件，這意味著每次CSS文件都會(huì)在那個(gè)目錄中搜索圖像(我把我的圖像放在& quot存放我的CSS文件& quot這就是它不工作的原因)。所以簡(jiǎn)單來(lái)說(shuō)把你的圖片放在靜態(tài)目錄下(你的圖片和CSS文件放在同一個(gè)目錄下的& quot靜態(tài)文件夾& quot)

我也有同樣的困惑，我遵循了上面提到的答案，但是由于某些原因，引用對(duì)我不起作用。 這是在模板中對(duì)我有效的方法:

{% load static %}

background-image: url('{% static 'my_folder/image.jpg' %}');"

雖然這里列出的解決方案是正確的，但我只想補(bǔ)充一點(diǎn)，你需要在更新CSS后清除瀏覽器的緩存(Ctrl + F5)。 參考此鏈接。

Django CSS沒(méi)有更新

這是Django文檔中的最佳解決方案，但我還是會(huì)發(fā)布簡(jiǎn)單的解決方案:

1- django.contrib.staticfiles應(yīng)該包含在您的INSTALLED_APPS中

Settings.py

文件。

2-將以下內(nèi)容添加到的末尾

settings.py

如果還沒(méi)有添加的話。

STATIC_URL = '/static/'

3-在html文件中，使用static通過(guò)img標(biāo)簽或css加載圖像。

{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">

或者

{% load static %}
<style>
    .bgimg {
      background-image: url("{% static 'my_app/example.jpg' %}");
    }
</style>

4-(重要) 在你的應(yīng)用程序目錄中創(chuàng)建靜態(tài)文件夾，然后在你的靜態(tài)文件夾中再次創(chuàng)建帶有你的應(yīng)用程序名稱的目錄，并將你的圖像放在那里。這些文件夾如下所示:

my _ app/static/my _ app/example . jpg 經(jīng)過(guò)所有這些步驟，圖像應(yīng)該顯示非常好。

而不是加入。css文件可以使用html樣式標(biāo)簽。

將此添加到您的HTML頂部

{% load static %}

在& lthead & gt標(biāo)簽添加如下

<style>
    #third {
        background: url("{{ STATIC_URL }}img/sample.jpeg") 50% 0 no-repeat fixed;
    }
</style>

如果您以后更改靜態(tài)文件路徑，它不會(huì)中斷

如果以上任何一個(gè)答案都不能解決您的問(wèn)題，請(qǐng)嘗試清除您的瀏覽器緩存。

在windows上shift + f5

如果有人在尋找另一種方法來(lái)解決這個(gè)問(wèn)題，你可能想從你的服務(wù)器或任何你可以訪問(wèn)的圖像托管服務(wù)熱鏈接圖像。我是這樣解決這個(gè)問(wèn)題的:

將圖片上傳到圖片托管網(wǎng)站或你的服務(wù)器上(試試Drive/Dropbox) 右鍵單擊并在新選項(xiàng)卡中打開圖像，以訪問(wèn)圖像URL 復(fù)制帶有(。jpeg，。png)擴(kuò)展名并粘貼到您的HTML文檔中。 這里有一個(gè)例子:

https://images.your-host.com/photos/image-path-here.jpeg

只要把& quot/靜態(tài)/../img . JPEG & quot；在路徑url之前