css - 如何在 thymeleaf 中为 css 文件设置背景 url？

Question

我有一个 thymeleaf 模板，我没有导入 CSS 文件，我想用 background-image: url{/image.jpg} 属性和相对图像声明 body 元素的样式属性网址。我想加载不包含应用程序上下文名称 (/myapp/) 的 URL。它类似于 here 上的问题，除了它对我不起作用。

CSS:

<style>
body {
    background: url(../img/Background.jpg)
                no-repeat center center fixed;
    background-size: cover;
}
</style>

但是上面的 CSS 不起作用，它访问了图像

http://localhost/img/Background.jpg. 

因此，我必须将值作为 url(/myapp/img/Background.jpg) 以正确加载图像。

我在 spring-context.xml 中正确设置了 mvc:resources 配置，以便 /img/ 请求正确加载并且它有效在其他地方。

spring-context.xml

<mvc:resources mapping="img/**" location="/WEB-INF/img/" />

那么如何使用thymeleaf的相对url动态加载背景url图片css值呢？

Answer 1

因此，这里是如何使用 thymeleaf 的内联文本值在 css 的背景图像 url 属性中设置动态相对路径，

<style th:inline="text">
    body{
        background: url{[[@{/img/Background.jpg}]]}
                    no-repeat center center fixed;
    }
</style>

它使用相对路径加载图像，我们不必在 url 中指定“myapp”上下文名称。