Fatal编程技术网
  • javascript/
  • Javascript 如何在html中使用div作为背景

Javascript 如何在html中使用div作为背景

javascript html css django

Javascript 如何在html中使用div作为背景,javascript,html,css,django,particles.js,Javascript,Html,Css,Django,Particles.js,嗨，我正在尝试建立一个网站，我正在尝试使用particles.js作为我的背景，并以叠加方式显示内容。但是，它显示在页面顶部而不是背景上。当我将它的位置设置为绝对位置时，它会改变我网站的格式。如何将该div设置为背景 在这里，当我将其设置为绝对值时，它如何改变网站的格式 我的背景div id设置为particles js 下面是我的base.html代码： <!DOCTYPE html> <html lang=en> {% load static %} {%

嗨，我正在尝试建立一个网站，我正在尝试使用particles.js作为我的背景，并以叠加方式显示内容。但是，它显示在页面顶部而不是背景上。当我将它的位置设置为绝对位置时，它会改变我网站的格式。如何将该div设置为背景

在这里，当我将其设置为绝对值时，它如何改变网站的格式

我的背景div id设置为particles 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>


{%load static%}
{%static'style.css%}
{%static'粒子。json%}
{%include'snippets/base_css.html%}
{%include'代码段/header.html%}
梅因先生{
最小高度：100vh；
身高：100%；
}
加载（'particles-js'，“{%static'particles.json”%}”，函数（）{
log（'particles.json loaded…'）；
});
{%block content%}
{%endblock内容%}
{%include'代码段/footer.html%}
这是my home.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 %}

{%extends'base.html%}
{%block content%}
@介质（最大宽度：768px）{
.右栏{
左边距：0px；
}
}
@介质（最小宽度：768px）{
.右栏{
左边距：20px；
}
}
.blog post容器{
边缘底部：20px；
宽度：100%；
}
.创建post bar{
背景色：#fff；
边缘底部：20px；
}
.左栏{
填充：0px；
}
.右栏{
填充：0px；
}
.铅{
字号：17px；
颜色：#000220；
文本对齐：居中；
}


{%if blog_posts%}
{blog_posts%}
{%包含“blog/snippets/blog_post_snippet.html”和blog_post=post%}
{%endfor%}
{%else%}
{%include'blog/snippets/blog_post_snippet.html'，query=query%}
{%endif%}
{%包含“blog/snippets/blog_post_pagination.html”和blog_posts=blog_posts%}

欢迎来到中心



{%endblock内容%}
这就是我的风格

    <style type="text/css">


    body{
        height: 100%;
        background-color: #000220;

    }
    #particles-js{
         height: 100% ;

 
        }


</style>


身体{
身高：100%；
背景色：#000220；
}
#粒子js{
身高：100%；
}
您可以试试，但我不确定这是否适合您

*{
填充：0；
保证金：0；
}
#背景组{
位置：绝对位置；
z指数：-1；
背景：线性梯度（#f7f4eb，#ded9cc）；
排名：0；
左：0；
右：0；
底部：0；
}

您的其他内容
应用负数
z-index
如
z-index:-1到该特定分区。一个位置为
的元素：绝对
（或除
静态
）以外的任何位置）始终相对于最近的非静态父对象定位自身。因此，由于您的
直接位于
内，因此它相对于主体定位自身（默认情况下，主体是相对的）。尝试用
位置：relative将您的背景封闭起来，并覆盖在另一个
中
（使用部分只是为了使其语义正确的html），您可以将
高度
和
宽度
设置为
100vh
和
100vw
，以进一步使其具有全屏横幅效果（可选）。@deekeh，它做了我想要的事情，但更改了网页的格式。我只希望该div显示在后台，而不改变我的位置content@tacoshy它只是把div放在了底部。请对你的答案给予充分的解释<代码>仅代码
答案被视为低质量。好的，我会尝试，我是新来的堆栈溢出当我尝试此方法时，它不会影响格式，但它会在内容上显示div，而不是背景使用z-index:-1；在css中，这应该是有用的！非常感谢。