gpt4 book ai didi

css - 如何使用 vh 制作页眉背景图片?

转载 作者:行者123 更新时间:2023-11-28 01:00:34 27 4
gpt4 key购买 nike

我对 CSS 非常陌生,我正在通过教程构建我的第一个网站。无论出于何种原因,我的标题背景图片都不会加载。我仔细检查了我的图像路径。我试过从类似问题中复制和粘贴代码,但似乎没有任何效果。

这是代码。

header {
background-image: url(img/hero.jpg);
height: 100vh;}

这是 HTML:

 <body>
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link ref="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,400i" rel="stylesheet" type="text/css">
<title>Omnifood</title>
</head>
</body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
<a href="#">I’m hungry</a>
<a href="#">Show me more</a>
</div>

</header>

最佳答案

html 和 css 看起来不错。您可以给 header 一个 display:block 或 width:100% 但这似乎不是它不起作用的原因。 html 的head 中是否有base?否则它可能与

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

<body>
<div id="page">
HEADER AND CONTENT AND FOOTER
</div>
</body>

关于css - 如何使用 vh 制作页眉背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52692039/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com