用thymeleaf设置CSS样式属性

Question

如何使用百万美分解析的网址设置样式标记的背景属性。

我有

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

在thymeleaf中设置样式属性是否等效<img th:src="${@/<path-to-image>}">。

Answer 1

如果您使用th:style设置样式属性，则可以实现此目的：

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

在thymeleaf论坛上查看this帖子。

Answer 2

@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>

Answer 3

您还可以使用文字替换：

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

Answer 4

我希望它会帮助别人。

请确保您的图片尺寸小于屏幕尺寸（以像素为单位）。否则，“背景”和“背景图像”都不适用于我。

Leandro的语法很好用。考虑使用这个（'background-image'而不是'background'）

<div th:style="'background-image:url(' + @{/images/R1.jpg} + ');'">

如果图像较小（不需要声明'不重复'），这个图像会延伸图像而不是重复图像