Настройка атрибутов стиля CSS с помощью thymeleaf

Как установить фоновое свойство тега стиля с разрешенным url-адресом thymeleaf.

Я 

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

есть <img th:src="${@/<path-to-image>}"> эквивалент для установки атрибутов стиля в thymeleaf.

9
css thymeleaf

3 ответов

Вы можете достичь этого, если используете th:style установить атрибут style:

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

Регистрация этой тема на форуме thymeleaf.

33

ответ, предложенный @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>
2

Я надеюсь, это поможет кому-то.

пожалуйста, убедитесь, что ваш размер изображения меньше, чем размер экрана в пикселях. В противном случае ни "фон", ни "фоновое изображение" не работали для меня.

синтаксис Леандро работает нормально. Рассмотрите возможность использования этого ('background-image 'вместо ' background')

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

Это растягивает изображение вместо того, чтобы повторять его, если изображение меньше ( не нужно указывать "нет-повторить")

-1