Question

我正在使用带有模板引擎Thymeleaf的Bootstrap作为前端，但是我似乎无法使用我的内联CSS显示背景图像，我在这个stackoverflow问题中尝试了答案link，这里是我的代码：

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Jumbotron</title>

</head>
<body>
<div th:fragment="jumbotron" >

<div class="jumbotron jumbotron-fluid"  style=" background-image: url('/static/jumbotron1.jpg'); text-align: center; margin-top: 110px;" >
  <h1>Bonjour</h1>
  <p> Application architectural</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Apprendre</a></p>
</div>
</div>

</body>
</html>

这里最重要的一行是：background-image: url('/static/jumbotron1.jpg'); 以下是我的文件排列方式（Jumbotron1.jpg是图像）：

Answer 1

您可以使用@ {}语法向thymeleaf添加静态资源。

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

在您的情况下，您必须使用以下两个选项进行测试：

<div th:style="'background:url(' + @{/static/jumbotron1.jpg} + '); text-align: center; margin-top: 110px;'"></div>

或：

<div th:style="'background:url(' + @{/jumbotron1.jpg} + '); text-align: center; margin-top: 110px; '"></div>

Jumbotron背景不显示Bootstrap

1 个答案: