使用thymeleaf设置CSS样式属性

如何使用thymeleaf解析的url设置样式标记的背景属性

我有

<div style="background:url('<url-to-image>')"></div>

---

在thymeleaf中设置样式属性是否有一个等价物。

如果使用

th:style

设置样式属性，则可以实现：

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

---

查看thymeleaf论坛上的帖子。

我希望它能帮助别人

请确保您的图像大小小于屏幕大小（像素）。否则，“背景”和“背景图像”都不适用于我

< Leordro的语法很好。考虑使用这一个（“背景图像”而不是“背景”）

---

如果图像较小（无需声明“no repeat”），则此选项将延伸图像而不是重复图像。

由@Leandro Carracedo提出的答案对我不起作用（但在这一过程中它起到了帮助），我必须添加第二对括号和“$”以从变量中获取值

<td th:style="'font-size:'+@{${headerTemplateTextSize}}+'; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px;-webkit-margin-end: 0px; font-weight: 300; max-width: 100px'">
    <div>...</div>
</td>

...

您也可以使用文字替换：

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

谢谢。语法有时会让人头疼。如何将变量从后端传递到宽度属性我在spring boot中遇到以下异常：不能是上下文相关（/）或页面相关，除非实现org.thymeleaf.context.IWebContext接口（上下文属于类：org.thymeleaf.context.context）完全不相关。请坚持主题，用评论代替。@Jelle Blaauw-你很酷。我仍然希望/相信它会帮助别人。

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