Question

我对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>

Answer 1

html和CSS看起来不错。您可以将header设置为display：block或width：100％，但这似乎不是其不起作用的原因。您在html的 head 中是否有 base ？否则它可能与

一起使用

ApiController

Answer 2

我遇到过这种问题。尝试将样式放在<head></head>之间，而不是放在外部。

如何使用vh制作标题背景图片？

2 个答案: