Настройка атрибутов стиля CSS с тимелеафом

Как установить свойство фона тега стиля с помощью разрешенного тимелеафа.

У меня

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

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

Ответы

Ответ 1

Это можно сделать, если вы используете th:style для установки атрибута стиля:

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

Отметьте эту тему на форуме thymeleaf.

Ответ 2

Ответ, предложенный @Leandro Carracedo, у меня не сработал (но помог на этом пути), мне пришлось добавить вторую пару скобок и '$', чтобы получить значение из переменной

<td th:style="'font-size:'[email protected]{${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>

Ответ 3

Вы также можете использовать буквальные замены:

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

Ответ 4

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

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

Синтаксис Leandro отлично работает. Подумайте также об использовании этого ( "background-image" вместо "background" )

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

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