“ Background-size:”不影响背景图片HTML CSS Flask

问题描述 投票:0回答:1

似乎无论我在css文件中将“ background-size:”设置为什么,背景图像的大小仍然会被切碎并且太小。我试过了background-size:cover;以及背景大小:100%100%;无论哪种方式,我的背景图像都会降级到页面顶部的一个小条。

我的CSS

    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }



h1 {
  color: white;
  font-size: 120px;
  font-family: 'Roboto Condensed', sans-serif;
}

body {

  width: 100%;
  background-color: black;
  color: white;
  font-size: 28px;
  font-family: verdana;

}


#banner{
  background-image: url(images/home.jpg);
  width: 100%;
  height:100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
}

body {
  height: 100%;
  width: 100%;
}

我的html

 <!DOCTYPE html>
<html>
  <head>
    <title>Algernon Industries</title>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css') }}" />


  </head>
  <body>
    <div id="banner">
      <h1>saasdf</h1>


    </div>
    <a href="/art">A R T</a>
  </body>
</html>

我的python:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template("homepage.html")

@app.route('/art')
def art():
    return render_template("art.html")



if __name__ == "__main__":
    app.run()
html css flask
1个回答
0
投票

您的问题是:

body{
   width: 100%:
}

[请记住,在DOM中,html是根元素,而body是html的子元素。

在html选择器中未指定宽度时,将主体设置为100%宽度会使宽度多余。 HTML不会自动占据网页宽度和高度的100%。

证明是,如果您为图像容器设置了特定的宽度和高度(以像素为单位),它将正常调整大小。

如果您希望这样做,则需要您的容器在网页上占据非常特定的空间。

通常,横幅广告占据页面的很大一部分。通常是height: 40-70vh

© www.soinside.com 2019 - 2024. All rights reserved.