万宝坤的背景图像没有显示

Question

我想在背景中显示图像，但它没有显示：

<div class="jumbotron jumbotron-fluid background: url('/assets/img/mhacks.jpg') no-repeat center center;">
    <div class="container text-sm-center p-t-3">

        <h1 class="display-2">Mona Jalal</h1>
        <p class="lead">Under construction</p>
    </div>
</div>

我看到的是：

​

P.S.：一般来说，我如何调试这些故障？这是我的小提琴：https://jsfiddle.net/e5qsnjdo/

使用以下代码：

<div class="jumbotron jumbotron-fluid style="background-image: url('/assets/img/mhacks.jpg') no-repeat center center;">
    <div class="container text-sm-center p-t-3">

        <h1 class="display-2">Mona Jalal</h1>
        <p class="lead">Under construction</p>
    </div>
</div>

我知道这些错误：

​

Answer 1

将background属性移动到style属性：

<div class="jumbotron jumbotron-fluid" style="background: url('/assets/img/mhacks.jpg') no-repeat center center;">

或在css中定义如下：

.jumbotron {
    background: url('./assets/img/mhacks.jpg') no-repeat center center;
}

//注意到。如果您不使用/assets。它会导致404错误-

Answer 2

​

<div class="jumbotron jumbotron-fluid" style=" background: url('/assets/img/mhacks.jpg') no-repeat center center;">
    <div class="container text-sm-center p-t-3">

        <h1 class="display-2">Mona Jalal</h1>
        <p class="lead">Under construction</p>
    </div>
</div>

​

Answer 3

您可以尝试这样做:将CSS属性从背景更改为背景图像。

例如背景图像: url("/assets/img/mhacks.jpg“)涵盖不重复；