似乎无论我在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()
您的问题是:
body{
width: 100%:
}
[请记住,在DOM中,html是根元素,而body是html的子元素。
在html选择器中未指定宽度时,将主体设置为100%宽度会使宽度多余。 HTML不会自动占据网页宽度和高度的100%。
证明是,如果您为图像容器设置了特定的宽度和高度(以像素为单位),它将正常调整大小。
如果您希望这样做,则需要您的容器在网页上占据非常特定的空间。
通常,横幅广告占据页面的很大一部分。通常是height: 40-70vh