时间戳

首页 > 解决方案 > 背景图像不会填满屏幕

html - 背景图像不会填满屏幕

问题描述

我正在尝试将背景添加到包含行容器的 HTML 页面。我从以下链接中获取了行的样式并对其进行了一些编辑（例如从 vscode 中的 scss 到 css） -链接

在此处输入图像描述

在他们的示例中，没有背景，但是当我添加背景时，由于某种原因，它似乎向右移动，并且没有将屏幕填充到底部（白色底部）。还可以在行上看到由于某种原因它在左侧显示更大的边距，而在原始代码中却没有。

在此处输入图像描述 任何想法为什么会发生？

我使用以下代码来做到这一点：

Python + 烧瓶：

from flask import Flask, url_for, render_template
from urllib.request import urlopen
from reading_data import read_hiscore
import json

app = Flask(__name__)

headings = ("name", "role", "salary")

data = (
    ("a", "aa", "55", 6),
    ("b", "bb", "60", 6),
    ("c", "cc", "65", 6),
    ("a", "aa", "55", 6),
    ("b", "bb", "60", 6),
    ("c", "cc", "65", 6),
)

@app.route("/")
def hello_world():
    return render_template("layout.html", headings=headings, data=data)

HTML：

<!DOCTYPE html>
<html>

<head>
  <title>Flask app</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body>
  <div class="container">
    <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2>
    <ul class="responsive-table">
      <li class="table-header">
        <div class="col col-1">Job Id</div>
        <div class="col col-2">Customer Name</div>
        <div class="col col-3">Amount Due</div>
        <div class="col col-4">Payment Status</div>
      </li>
      {% for row in data %}
      <li class="table-row">
        {% for cell in row %}
        <div class="col col-1"> {{ cell }}</div>
        {% endfor %}
      </li>
      {% endfor %}
    </ul>
  </div>
</body>

</html>

CSS：

body {
  font-family: "lato", sans-serif;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  min-height: 100%;
  min-width: 100%;
}

h2 {
  font-size: 26px;
  text-align: center;
  color: white;
}

h2 small {
  font-size: 0.5em;
  color: white;
}

.responsive-table li {
  border-radius: 16px;
  padding: 30px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.responsive-table .table-header {
  background-color: blue;
  color: white;
  font-size: 14px;
  font-weight: bold;
  flex-basis: 25%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.responsive-table .table-row {
  background: blue;
  color: white;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.responsive-table .col-1 {
  flex-basis: 25%;
  text-align: center;
}

.responsive-table .col-2 {
  flex-basis: 25%;
}

.responsive-table .col-3 {
  flex-basis: 25%;
}

.responsive-table .col-4 {
  flex-basis: 25%;
}

@media all and (max-width: 100%) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}

标签： htmlcss

解决方案

要将图像扩展至全高，您需要添加 css html、body标签和 set min-height: 100%。然后给body添加属性

html,
body {
  min-height: 100%;
}
body {
  font-family: 'lato', sans-serif;
  background-image: url('https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


html,
body {
  min-height: 100%;
}

body {
  font-family: 'lato', sans-serif;
  background-image: url('https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}

h2 small {
  font-size: 0.5em;
}

li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.table-header {
  background-color: #95a5a6;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.col-1 {
  flex-basis: 10%;
}

.col-2 {
  flex-basis: 40%;
}

.col-3 {
  flex-basis: 25%;
}

.col-4 {
  flex-basis: 25%;
}

@media all and (max-width: 767px) {
  .table-header {
    display: none;
  }
  li {
    display: block;
  }
  .col {
    flex-basis: 100%;
  }
  .col {
    display: flex;
    padding: 10px 0;
  }
  .col:before {
    color: #6c7a89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
<div class="container">
  <h2>Responsive Tables Using LI <small>Triggers on 767px</small></h2>
  <ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Job Id</div>
      <div class="col col-2">Customer Name</div>
      <div class="col col-3">Amount Due</div>
      <div class="col col-4">Payment Status</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42235</div>
      <div class="col col-2" data-label="Customer Name">John Doe</div>
      <div class="col col-3" data-label="Amount">$350</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42442</div>
      <div class="col col-2" data-label="Customer Name">Jennifer Smith</div>
      <div class="col col-3" data-label="Amount">$220</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42257</div>
      <div class="col col-2" data-label="Customer Name">John Smith</div>
      <div class="col col-3" data-label="Amount">$341</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="Job Id">42311</div>
      <div class="col col-2" data-label="Customer Name">John Carpenter</div>
      <div class="col col-3" data-label="Amount">$115</div>
      <div class="col col-4" data-label="Payment Status">Pending</div>
    </li>
  </ul>
</div>

推荐阅读