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

您的图片应位于公共文件夹中。因此，在公共场所创建一个名为＆＃39; Images＆＃39;使用大写字母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);之前有一个斜杠'/'，现在图像已经出现。我的项目公用文件夹和banner.jpg中的图像和css文件夹位于images文件夹中。