[英]How to use div for background in html
您好我正在尝试建立一个网站,并且我正在尝试使用particles.js 作为我的背景并以叠加方式显示内容。 但是,它显示在页面顶部而不是背景上。 当我将其 position 设置为绝对时,它会改变我网站的格式。 如何将该 div 设置为背景?
在这里它如何改变网站的格式,当我将它设置为绝对
我将背景 div id 设置为particle-js这是我的 base.html 代码:
<!DOCTYPE html>
<html lang=en>
{% load static %}
{% static 'style.css' %}
{% static 'particles.json' %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
{% include 'snippets/base_css.html' %}
{% include 'snippets/header.html' %}
<!-- Body -->
<style type="text/css">
.main{
min-height: 100vh;
height: 100%;
}
</style>
<div class="main">
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', "{% static 'particles.json' %}", function(){
console.log('particles.json loaded...');
});
</script>
{% block content %}
{% endblock content %}
</div>
<!-- End Body -->
{% include 'snippets/footer.html' %}
</body>
</html>
这是我的家。html:
{% extends 'base.html' %}
{% block content %}
<style type="text/css">
@media (max-width: 768px) {
.right-column{
margin-left: 0px;
}
}
@media (min-width: 768px) {
.right-column{
margin-left: 20px;
}
}
.blog-post-container{
margin-bottom: 20px;
width: 100%;
}
.create-post-bar{
background-color: #fff;
margin-bottom:20px;
}
.left-column{
padding:0px;
}
.right-column{
padding:0px;
}
.lead{
font-size: 17px;
color: #000220;
text-align: center;
}
</style>
<!-- main content -->
<div class="container">
<div class="row">
<!-- blog feed -->
<div class="left-column col-lg-7 offset-lg-1">
<!-- Top 'create post' bar -->
<div class="d-lg-none mb-3">
<div class="card m-auto d-flex flex-column p-3">
<img class="img-fluid d-block m-auto pb-2" src="{% static 'covalent.png' %}" width="72" height="72">
<p class="m-auto"><a class="btn btn-primary" href="{% url 'blog:create' %}">Create post</a></p>
</div>
</div>
<!-- end Top 'create post' bar -->
<!-- Blog posts-->
{% if blog_posts %}
{% for post in blog_posts %}
<div class="blog-post-container">
{% include 'blog/snippets/blog_post_snippet.html' with blog_post=post %}
</div>
{% endfor %}
{% else %}
<div class="blog-post-container">
{% include 'blog/snippets/blog_post_snippet.html' with query=query %}
</div>
{% endif %}
<!-- End Blog posts-->
<!-- Pagination -->
{% include 'blog/snippets/blog_post_pagination.html' with blog_posts=blog_posts %}
</div>
<!-- end blog feed -->
<!-- Right 'create post' column -->
<div class="right-column col-lg-3 d-lg-flex d-none flex-column">
<div class="card create-post-bar d-flex flex-column p-3">
<img class="img-fluid d-block m-auto pb-2" src="{% static 'covalent.png' %}" width="72" height="72">
<p class="lead">Welcome to the HUB</p>
<p class="m-auto"><a class="btn btn-primary" href="{% url 'blog:create' %}">Create post</a></p>
</div>
</div>
<!-- end Right 'create post' column -->
</div>
</div>
{% endblock content %}
这是我的风格。css
<style type="text/css">
body{
height: 100%;
background-color: #000220;
}
#particles-js{
height: 100% ;
}
</style>
你可以试试这个,但我不确定这是否适合你。
* { padding: 0; margin: 0; } #background-div { position: absolute; z-index: -1; background: linear-gradient(#f7f4eb, #ded9cc); top: 0; left: 0; right: 0; bottom: 0; }
<div id="background-div"> <!--background-content--> </div> <div class='container'> your other contents </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.