时间戳

首页 > 解决方案 > 如何在网页中添加背景图片？

html - 如何在网页中添加背景图片？

问题描述

我想在我的网页上添加一个背景图像，并在预测/提交按钮旁边添加一个小图像，但它只是显示一个断开的链接图标而不是图像。背景图像也没有显示。我确保图像与我的 html 文件位于同一文件夹中，但没有运气。这是我的代码：

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

    <center>

    <h1> WHEAT SPECIES CLASSIFICATION </h1><br>
    
    <form method="POST", action="{{url_for('home')}}">
       
       <b> compactness :  <input name="compactness" type="number" step="any" min="0" 
                          class="form-control" required> <br><br>
       
       kernel length : <input name="kernel_length" type="number" step="any" min="0" 
                       class="form-control" required> <br><br>

       width : <input name="width" type="number" step="any" min="0" class="form-control" 
               required> <br><br>            

       asymmetry coef : <input name="asymmetry_coef" type="number" step="any" min="0" 
                        class="form-control" required> <br><br>
       
       groove length : <input name="groove_length" type="number" step="any" min="0" 
                       class="form-control" required> <br><br>
       
       <input type="submit" , value='predict!' >
       
    </form>
    
    </center>
    
</body>
    
</html>

编辑 1：我尝试了已回答的建议，但现在图像放大了太多。如何调整图像大小？

在此处输入图像描述

标签： htmlimageflask

解决方案

默认情况下，当您使用 Flask 时，会在“flaskProject/static”中查找资源，因此您必须将图像保留在“flaskProject/static/img/”中（必要时创建它们）。

然后您可以使用相对路径引用资源：

background-image: url({{ url_for('static', filename='img/wheat.jpg') }})

参考：* https://flask.palletsprojects.com/en/1.0.x/tutorial/static/

推荐阅读