英雄的 Laravel CSS 背景图像

Question

我一直在尝试在我的 Laravel 5.4 项目中创建一个英雄标题。但是，某件事似乎并没有按预期的方式工作。

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

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

home.blade.php：

@extends('layouts.app')

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

    @include('partials.hero')


</div>
@endsection

hero.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

您的图片应位于您的公共文件夹中。因此，在公共文件夹中创建一个名为“Images”的大写字母 I，并将 hero-image.png 放在创建的文件夹中。

Answer 2

高度在 CSS 中确实很棘手。我建议你使用像Bootstrap 或Foundation 这样的框架。

Answer 3

它不知道50%是什么，你需要声明

html, body { height: 100%;}

Answer 4

我遇到了同样的问题，刚刚解决了。我的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);之前的单斜杠'/'，现在图像已经出现。我的项目公共文件夹中的图像和 css 文件夹和banner.jpg 位于图像文件夹中。