python之django的html插入背景图片

2022-05-24 本文已影响0人软件开发技术修炼

使用django框架对html引入背景图片时，图片无法显示，是因为django框架需要对图片设置为静态

第一步：在django的setting文件中设置如下图（此路径设置的static是和django同一等级）

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

第二步：在需要插入html的文件中的head中写入一下代码

<head {% load static %}>

第三步：引用对应路径的图片

<body style="background-image: url('{% static 'img/bj.jpg' %}')">   //代表的是静态文件夹(static)下的img文件夹中的bj.jpg文件

第四步：注意图片添加位置

图片位置

第五步：如何使得图片平铺
因图片大小，图片分4块平铺，设置如下：
background-size: cover;

<body style="background-size: cover;background-image: url('{% static 'img/bj.jpg' %}')">

最终效果：

背景图片