基于flask的页面，为什么背景图不显示？

莫凡辰 · 发表于 2022-7-4 09:51:30

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
<title>Document</title>
<style>
      * {
         margin: 0;
         padding: 0;
      }

      html {
         height: 100%;
      }

      body {
         height: 100%;
         font-family: JetBrains Mono Medium;
         display: flex;
         align-items: center;
         justify-content: center;
         /* background-color: #0e92b3; */
         background: url('') no-repeat;
         background-size: 100% 100%;
      }

      .form-wrapper {
         width: 300px;
         background-color: rgba(41, 45, 62, .8);
         color: #fff;
         border-radius: 2px;
         padding: 50px;
      }

      .form-wrapper .header {
         text-align: center;
         font-size: 35px;
         text-transform: uppercase;
         line-height: 100px;
      }

      .form-wrapper .input-wrapper input {
         background-color: rgb(41, 45, 62);
         border: 0;
         width: 100%;
         text-align: center;
         font-size: 15px;
         color: #fff;
         outline: none;
      }

      .form-wrapper .input-wrapper input::placeholder {
         text-transform: uppercase;
      }

      .form-wrapper .input-wrapper .border-wrapper {
         background-image: linear-gradient(to right, #e8198b, #0eb4dd);
         width: 100%;
         height: 50px;
         margin-bottom: 20px;
         border-radius: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
      }

      .form-wrapper .input-wrapper .border-wrapper .border-item {
         height: calc(100% - 4px);
         width: calc(100% - 4px);
         border-radius: 30px;
      }

      .form-wrapper .action {
         display: flex;
         justify-content: center;
      }

      .form-wrapper .action .btn {
         width: 60%;
         text-transform: uppercase;
         border: 2px solid #0e92b3;
         text-align: center;
         line-height: 50px;
         border-radius: 30px;
         cursor: pointer;
      }

      .form-wrapper .action .btn:hover {
         background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }

      .form-wrapper .icon-wrapper {
         text-align: center;
         width: 60%;
         margin: 0 auto;
         margin-top: 20px;
         border-top: 1px dashed rgb(146, 146, 146);
         padding: 20px;
      }

      .form-wrapper .icon-wrapper i {
         font-size: 20px;
         color: rgb(187, 187, 187);
         cursor: pointer;
         border: 1px solid #fff;
         padding: 5px;
         border-radius: 20px;
      }

      .form-wrapper .icon-wrapper i:hover {
         background-color: #0e92b3;
      }
</style>
</head>
<body>
<div class="form-wrapper">
      <div class="header">
         login
      </div>
      <div class="input-wrapper">
         <div class="border-wrapper">
            <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
         </div>
         <div class="border-wrapper">
            <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
         </div>
      </div>
      <div class="action">
         <div class="btn">login</div>
      </div>
      <div class="icon-wrapper">
         <i class="iconfont icon-weixin"></i>
         <i class="iconfont icon-qq"></i>
         <i class="iconfont icon-git"></i>
      </div>
</div>
</body>
背景图在图片中
为什么背景图一直不显示？

wp231957 · 发表于 2022-7-4 10:49:10

没有看到相关显示图片的脚本

怂小白 · 发表于 2022-7-4 14:57:29

学习学习

leletatann · 发表于 2022-7-4 15:29:06

你应该截图网页

z5560636 · 发表于 2022-7-4 16:28:39

本帖最后由 z5560636 于 2022-7-4 16:29 编辑

background: url('') no-repeat;
            background-size: 100% 100%;

你背景图片的地址都没引用进去，怎么帮你显示？

再说，你问错板块了，这个是前端的样式问题，和flask 有啥关系的？

莫凡辰 · 发表于 2022-7-5 08:26:47

z5560636 发表于 2022-7-4 16:28
你背景图片的地址都没引用进去，怎么帮你显示？

再说，你问错板块了，这个是前端的样式问题，和flask ...

基于flask框架的前端

莫凡辰 · 发表于 2022-7-5 08:28:57

莫凡辰发表于 2022-7-5 08:26
基于flask框架的前端

我之前加了也没显示，我把图片放在了static文件夹里

z5560636 · 发表于 2022-7-6 09:46:31

莫凡辰发表于 2022-7-5 08:28
我之前加了也没显示，我把图片放在了static文件夹里

那你的意思是，你把文件放到 static 文件夹里面，然后用意念告诉你的程序，说我要用他做背景图片，电脑就会通过意念感知到么？

z5560636 · 发表于 2022-7-6 09:48:48

莫凡辰发表于 2022-7-5 08:26
基于flask框架的前端

那你说的很对了，你既然知道是flask框架，那么你放前端代码是让人帮你看html 的代码？还是说你已经知道问题错在哪了？

账号		自动登录	找回密码
密码			立即注册

基于flask的页面，为什么背景图不显示？

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +1 鱼币

回帖奖励 +1 鱼币

回帖奖励 +1 鱼币