如何将 html 屏幕的背景更改为图像？

Question

{% extends "layout.html" %}

{% block app_content %}
    <div>
        {% from "_formhelpers.html" import render_field %}
        <form method="post" enctype="multipart/form-data">
            <div class = "container">
                <div class = "row">
                    
                    <div class="col-md-5 col-sm-12 align-self-center">
                        <div class="card">
                            <div class="card-header">
                                Register
                            </div>
                            <div class="card-body">
                                <div>
                                    {{ form.hidden_tag()}}
                                    {{ render_field(form.fname, class="form-control")}}
                                    {{ render_field(form.lname, class="form-control")}}
                                    {{ render_field(form.email, class="form-control")}}
                                    {{ render_field(form.phoneno, class="form-control")}}
                                    {{ render_field(form.password, class="form-control")}}
                                    {{ render_field(form.confirm_password, class="form-control")}}
                                    
                                    {{ render_field(form.submit, class="btn btn-primary")}}
                                </div>
                                <p>Already have an account? <a href="{{ url_for('auth.login')}}">Login</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {% endblock app_content%}

这是我的 html 代码，我想要做的是添加一个图像作为表单的背景，以便表单在图像上（图像应该覆盖整个屏幕）。 如果没有实际的 .css 文件，我该怎么做？

Answer 1

为表单的 div 容器的类编写 CSS。 使这个 div 有一个背景图片：

CSS

 .form-div {
  background-image: url("your_bg_image.jpg");
  width : 100 vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

HTML

 <div class="form-div">
    <form>
    </form>
</div>

或者

您可以将图像作为 html 文档正文的背景：

body  {
background-image: url("your_bg_image.jpg");
background-color: #cccccc;

}

Answer 2

在您的示例中，您的标签 < boby > 在哪里？ ?

<style>
body {
  background-image: url('yourImg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>

https://www.w3schools.com/html/html_images_background.asp

-泰迪熊-

Answer 3

您只需要将 background-image 属性添加到您想要拥有背景图像的任何 div。 如果你想让它成为整个页面的背景，也许你应该把它放在你在顶部扩展的 layout.html 文件中。

 <div style="background-image: url('img_girl.jpg');">

[https://www.w3schools.com/html/html_images_background.asp][1]

请注意，任何 css 属性都不必在 css 文件中。 您可以将它添加到<script>标记下的 html 文件顶部。