Wri*_*dle 3 html css django django-templates
我的css文件正在工作，但是我无法添加bacgorund图像。我尝试3种方式，但不起作用。
这是我的style.css
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
这是我的base.html（img正在工作）
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}VPW{% endblock %}</title>
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<script href="{% static 'js/bootstrap.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row head">
<div class="col-md-12">
<div class="col-md-4">
</div>
<div class="col-md-4 logo">
<img src="{% static 'img/logo1.png' %}">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
这是我的main.html，其中我有第一个信息类。
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
我尝试更改CSS背景图像：url（“ {％static'img / bg.jpg'％}”）; 到背景图片：url（“ img / bg.jpg”）; 但是不起作用
这是预期的行为。Django模板引擎在渲染html模板时填充所有变量。它不会填充HTML中包含的CSS文件中的值。
您的base.html因为{% static 'img/logo1.png' %}被替换为类似的东西，/static/img/logo1.png并且浏览器能够找到图像，加载图像并进行渲染。
如果要使背景图像动态化，则可以。
您可以直接在模板中添加CSS类，即
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
<style>
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
</style>
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
或直接在html标记中使用内联CSS。
<div class="row first-info" style="background-image: url({% static 'img/bg.jpg' %})" >
或者，只需在您的CSS文件中对完整路径进行硬编码。但是它消除了动态行为，即静态路径。我假设这只是/static/
.first-info{
width: 100%;
height: 300px;
background-image: url( '/static/img/bg.jpg' );
}
| 归档时间： |
|
| 查看次数： |
13301 次 |
| 最近记录： |