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

Question

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

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

У меня есть

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

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

815 3

css thymeleaf

3 ответов:

Comments

Ничего не найдено.

Leandro Carracedo · Accepted Answer · 2015-03-19 16:05:34

Этого можно достичь, если использовать th:style для установки атрибута стиля:
<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>
ПроверьтеЭту нить на форуме thymeleaf.

Jaroslav · Accepted Answer · 2018-04-05 15:23:35

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

Ula · Accepted Answer · 2017-12-13 10:09:56

Я надеюсь, что это поможет кому-то.
Пожалуйста, убедитесь, что размер вашего изображения меньше, чем размер экрана в пикселях. В противном случае ни "фон", ни "фоновое изображение" для меня не работали.
Синтаксис Леандро работает отлично. Рассмотрите возможность использования и этого ('background-image 'вместо ' background')
<div th:style="'background-image:url(' + @{/images/R1.jpg} + ');'">
Это растягивает изображение, а не повторяет его, если изображение меньше ( нет необходимости указывать "нет-повторять")