1. 程式人生 > >django之設定背景圖片 CSS 拉伸 平鋪

django之設定背景圖片 CSS 拉伸 平鋪

django2.0   背景圖片存在static資料夾中

1、設定setting.py資料夾。

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

2、在html檔案中,載入static資料夾,加入第一行就好了。

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">

3、html檔案:

<body style="background-image: url({% static 'b1.jpg' %});background-size:100% 150%;" >

我圖片的地址是:工程根目錄/static/b1.jpg

background-size後面的兩個百分數就是 分別設定 背景圖片的長寬,根據需求自己設定。

相關推薦

django設定背景圖片 CSS

django2.0   背景圖片存在static資料夾中1、設定setting.py資料夾。STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]2、在html檔

PyCharm使用技巧設定背景圖片

設定的路徑為: File | Settings | Appearance & Behavior | Appearance 選擇Background Image 彈窗的視窗中 Image:點選

讓div背景圖片自動,而不是!超簡單!

無法拉伸! 但是可以用 background-repeat:no-repeat; 這個方法來 控制背景不會平鋪! 或者將你上面的程式碼改為 <div id="BgImg" style="height: 194px; width:100%; back

android button背景圖片的一種處理方法

一般來說UI給的圖片比例應該和控制元件是正好符合的,但是實際操作過程中會發現可能不符合的情況,比例不對直接設定background的話background會被拉伸,這個時候一般來說如果能像ImageView一樣設定scaleType為centerCrop或者center就好了

【iOS開發-背景】關於按鈕背景圖片

關於按鈕背景圖片拉伸與不拉伸的效果 拉伸的效果: 不拉伸的效果 拉伸的效果: 不拉伸的效果 拉伸原理 iOS開發中,有一個方法可以將圖片按照指定的形式拉伸,拉伸方式為下圖,一般拉伸部分都為0: 實現方式 新建一個UIIm

解決android:background背景圖片問題

ImageView中XML屬性src和background的區別: background會根據ImageView元件給定的長寬進行拉伸,而src就存放的是原圖的大小,不會進行拉伸。src是圖片內容(前景),bg是背景,可以同時使用。 此外:scaleType只對src

css圖片顯示多餘的裁剪

實際圖片大小 顯示部分圖片 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="view

ios圖片、UIImageView的stretchableImageWithLeftCapWidth方法詳解

#import "UIImage+Extension.h" @implementation UIImage (Extension) + (UIImage *)resizedImageWithName:(NSString *)name { return [self resizedImageWithN

js設定圖片

設定圖片不拉伸的js: /** * 設定圖片大小並且不拉伸 * @param ImgD * @param width * @param height * @constructor */ function DrawImage(ImgD, width, height) {

css 設定背景圖片模糊,內容不模糊,怎麼用css設定背景模糊

需求:一個div設定了background: url,現在需要使圖片背景模糊,div內的文字清晰顯示。 解決方法:內容和圖片分別置於一個div,通過css設定背景div模糊度,設定內容div絕對位置,實質上是在底層加了一個div,給這個div設定模糊了。 <

圖片或變形時,你需要用到css中的object-fit

關鍵屬性:object-fit:fill;     (初始值) 被替換的內容大小可以填充元素的內容框。 整個物件將完全填充此框。 如果物件的高寬比不匹配其框的寬高比,那麼該物件將被拉伸以適應。object-fit:contain;  被替換的內容將被縮放,以在填充元素的內容框

為button設定背景圖片,且全無button痕跡的css

.bt-style{background-repeat:no-repeat;background-image:url("../Images/Search.png");width: 6em;height: 2em;background-color: transparent;b

quick-cocos2d-x教程9:實例加上背景圖片

nbsp mod work .text eight zip function 大小 dto 在梳理完quick-cocos2d-x框架的各個文件夾後,我們開始我們的實例教程,在helloworld後面。加上一張圖片,lua編輯器,我用的lua editor。還不錯。

PS摳圖單色背景圖片

自己的 選中 軟件 取消 tro 很好 每天 快速 ctrl+v PS一直大家比較喜歡的一款圖像處理軟件,很多朋友對使用基本的功能。最近很多的朋友都在問我關於PS摳圖的方法,這些方法也不是一句兩句就能說清楚,並且每天都重復的叫他們,不如直接寫出來剛剛接觸到的朋友一起學習交流

[轉]一種讓超大banner圖片、全屏寬、居中顯示的方法

posit code overflow 都是 flow cnblogs width banner 圖片 現在很多網站的Banner圖片都是全屏寬度的,這樣的網站看起來顯得很大氣。這種Banner一般都是做一張很大的圖片,然後在不同分辨率下都是顯示圖片的中間部分。實現方法如下

vue-cli run build 後 背景圖片 css background:url('path') 載入問題

1、在webpack.prod.conf.js檔案裡output裡面新增:publicPath:'./' 2、在utils.js檔案裡新增 publicPath:'../../' 3、在config/index.js檔案裡,新增assetsPublicPath:'./'

74 - three.js 筆記 - 通過透明渲染設定背景圖片

1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180910/01-canvas-background-image.html 效果 2、實現步驟 2.1、背景圖 2.2、設定背景 此處是給body元素設定了背景

vue.js div 設定背景圖片

佈局: <div class="middle" :style="backgroundDiv"> <img src="./images/[email protected]" style="width: auto; height: 40px;"> </

小程式設定背景圖片

小程式的元素,比如<view>不可以在wxss裡面設定背景圖片,只能在<image>裡面設定圖片 如果想在<view>標籤上設定背景圖片,只能在wxml裡面設定行內樣式,並且圖片還必須是線上圖片 <view style="background-ima

Visual Studio設定背景圖片

今天聽了公司的一個經驗分享會,發現VS竟然可以設定背景圖片!還是個萌妹子!!被萌了一臉鼻血!!! 設定方法很簡單:安裝擴充套件ClaudiaIDE 1、在這裡下載擴充套件,https://visualstudiogallery.msdn.microsoft.com/9ba50f8d-