php - 英雄的 Laravel CSS 背景图像

Question

我一直在尝试在我的 Laravel 5.4 元素中创建一个英雄标题。然而，有一件事情似乎并没有按照预期的方式运作。

(如果您不熟悉英雄标题是什么；它基本上是一张覆盖整个屏幕的图像，在首次加载网站时用作背景，通常在顶部带有一些文本和号召性用语的。)

根据我一直在做的研究，这是我构建代码的方式:

home.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">

    @include('partials.hero')


</div>
@endsection

英雄.blade.php:

<div class="hero-image">
<div class="hero-text">
    <h1>Hero header</h1>
    <p>Hero text</p>
    <button id="hero-prim" class="button-primary">Action!</button>
    <button id="hero-sec" class="button-secondary">Info</button>
</div>

最后是 CSS:

.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

奇怪的是，文本和按钮随页面一起加载，但没有图像的迹象。即使我排除任何其他元素并尝试只显示图像，它也没有给我任何帮助。 这让我认为问题一定出在我如何在我的 CSS 中设置背景图像，但我不知道我必须如何以不同的方式来做。

非常感谢任何帮助或建议!

---

编辑: 图像现在可以正确显示，但不会延伸到整个屏幕宽度，我认为它只会延伸到整个部分。

无论如何，我不确定到底是代码中的哪个更改导致了这种情况发生，但是在尝试了一些 Bootstrap 类并将 html 和 body 的高度定义为 100%(由 VegaPunk 提供)之后，事情已经发生了更好。

很抱歉，我无法定义更明确的答案，但这对我来说仍然是个谜，因为昨天这些解决方案似乎都无法独立工作。

Answer 1

我遇到了同样的问题，刚刚解决了。我的 css 代码是 background: url(images/banner.jpg); 错误是 Failed to load resource: the server responded with a status of 404 (Not Found) .解决方案是添加两个点 '.'和图像前的单斜杠'/' background: url(../images/banner.jpg);，现在图像已经出现了。我的元素公共(public)文件夹中的图像和 css 文件夹和 banner.jpg 位于图像文件夹中。