如何在百里香中设置css文件的背景网址？答案

【问题标题】：How to set background url for css files in thymeleaf?如何在百里香中设置css文件的背景网址？
【发布时间】：2016-06-17 19:16:30
【问题描述】：

我有一个 thymeleaf 模板，我没有导入 CSS 文件，并希望使用带有相对图像 URL 的 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值呢？

【问题讨论】：

标签： css background-image thymeleaf relative-path

【解决方案1】：

    <body th:style="'background-image:url(' + @{/images/background.jpg} + '); background-repeat: no-repeat, repeat; background-size: cover;'">
    </body>

【讨论】：

【解决方案2】：

另一种选择是：

<body th:style="'background: url(/img/la-paz-city.jpg) no-repeat center center fixed;'">
...
</body>

就是这样?

【讨论】：

不适合我。这对我有用th:style="'background:url('+ @{/image/login-background.jpg} +');'"

【解决方案3】：

就我而言，这有帮助：将括号从大括号改为圆括号

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

我将如何为 aurl 字符串执行此操作？
@Lucky 嗨，我知道这是一个老话题，但是请您添加一个特定的资源处理程序吗？如果是，你能分享一下吗？谢谢
@Sofiane 不需要任何资源处理程序。如果您可以将其添加到任何 Thymeleaf 模板中，它应该可以正常工作。