如何在 thymeleaf 中為 css 文件設置背景 url？

Question

我有一個 thymeleaf 模板，我沒有導入 CSS 文件，我想用background-image: url{/image.jpg}屬性和相對圖像 URL 聲明 body 元素的 style 屬性。 我想在不包含應用程序上下文名稱（ /myapp/ ）的情況下加載 URL。 它類似於這里的問題，只是它對我不起作用。

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”上下文名稱。

Answer 2

另一種選擇是：

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

就是這樣😉

Answer 3

在我的情況下有幫助：將括號從卷曲更改為圓形

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

Answer 4

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

如何在 thymeleaf 中為 css 文件設置背景 url？

問題描述

4 個解決方案

解決方案1
11 已采納 2016-03-04 06:36:19

解決方案2
4 2019-04-16 23:19:06

解決方案3
2 2018-11-02 16:27:59

解決方案4
1 2020-10-18 14:27:07

如何在 thymeleaf 中為 css 文件設置背景 url？

問題描述

4 個解決方案

解決方案1 11 已采納 2016-03-04 06:36:19

解決方案2 4 2019-04-16 23:19:06

解決方案3 2 2018-11-02 16:27:59

解決方案4 1 2020-10-18 14:27:07

解決方案1
11 已采納 2016-03-04 06:36:19

解決方案2
4 2019-04-16 23:19:06

解決方案3
2 2018-11-02 16:27:59

解決方案4
1 2020-10-18 14:27:07