我试图将页眉的背景图像扩展到浏览器高度的 100%，但它不起作用。虽然是大壁纸，但 bg 图片只是一个小条，你看到我的错误了吗？
<head>
<meta charset="UTF-8">
<title>TEXT</title>
<meta name="description" content="text">
<meta name="keywords" content="text" >
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header>
<h1>TEXT <br> <span>TEXT</span></h1>
</header>
<section>
<article>
<p>TEXT</p>
<img src="images/spachtel1.jpg"><br>
<img src="images/spachtel1.jpg"><br><br>
</article>
</section>
<footer>
<h3>text<br>
</footer>
</body>
这是 CSS 文件:
@font-face { /* ERSTENS LADE font family rein*/
font-family: 'alex_brushregular';
src: url('../css/alexbrush-regular-webfont.eot');
src: url('../css/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../css/alexbrush-regular-webfont.woff2') format('woff2'),
url('../css/alexbrush-regular-webfont.woff') format('woff'),
url('../css/alexbrush-regular-webfont.ttf') format('truetype'),
url('../css/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
font-size: 1rem;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
h1 { /
font-family: 'alex_brushregular', 'sans-serif';
}
section p {
font-weight: 100;
font-size: 1.13rem;
font-style: italic;
}
span.by {
color: red;
}
section a {
color: #eda318;
text-decoration: none;
font-style: normal;
}
section a:hover {
text-decoration: underline;
}
header {
background-image: url('../images/bgheader1.jpg');
background-position: 50% 50%;
background-size: cover;
}
最佳答案
我认为这是因为您的背景图片设置只影响您的页眉。尝试让它影响您的 body 。
关于html - 如何使标题的 bg 图像达到浏览器高度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37040671/