使用 thymeleaf 设置 CSS 样式属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29140647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting CSS style attributes with thymeleaf
提问by Mushtaq Jameel
How to set the background property of a style tag with a thymeleaf resolved url.
如何使用 thymeleaf 解析的 url 设置样式标签的背景属性。
I have
我有
<div style="background:url('<url-to-image>')"></div>
Is there a <img th:src="${@/<path-to-image>}">equivalent for setting style attributes in thymeleaf.
<img th:src="${@/<path-to-image>}">在 thymeleaf 中是否有等效的设置样式属性。
回答by Leandro Carracedo
回答by Jaroslav
The answer suggested by @Leandro Carracedo did not work for me (but it helped along the way), I had to add second pair of brackets and '$' to get the value out of the variable
@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>
回答by Rafael Takashima
You can also use literal substitutions:
您还可以使用文字替换：
<div th:style="|background:url(@{/<path-to-image>});|"></div>
回答by Ula
I hope it will help someone.
我希望它会帮助某人。
Please make sure that your image SIZE is SMALLER than screen size in pixels. Otherwise, neither 'background' nor 'background-image' did not work for me.
请确保您的图像 SIZE 比以像素为单位的屏幕尺寸小。否则，“背景”和“背景图像”都不适合我。
Leandro's syntax works fine. Consider using this one as well ( 'background-image' instead of 'background' )
Leandro 的语法工作正常。也考虑使用这个（ 'background-image' 而不是 'background' ）
<div th:style="'background-image:url(' + @{/images/R1.jpg} + ');'">
This one stretches out the image instead of repeating it if image is smaller ( no need to state 'no-repeat' )
如果图像较小，则此图像会拉伸图像而不是重复图像（无需说明“无重复”）
