web-dev-qa-db-fra.com

Définition des attributs de style CSS avec thymeleaf

Comment définir la propriété d'arrière-plan d'une balise de style avec une URL résolue thymeleaf.

J'ai

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

Y a t-il <img th:src="${@/<path-to-image>}"> équivalent pour définir les attributs de style dans thymeleaf.

cssthymeleaf
13
Mushtaq Jameel

Vous pouvez y parvenir si vous utilisez th:style pour définir votre attribut de style:

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

Vérifiez ce fil sur le forum thymeleaf.

41
Leandro Carracedo

La réponse suggérée par @Leandro Carracedo n'a pas fonctionné pour moi (mais elle a aidé en cours de route), j'ai dû ajouter une deuxième paire de crochets et '$' pour obtenir la valeur de la variable

<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>
4
Jaroslav

Vous pouvez également utiliser des substitutions littérales:

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

J'espère que cela aidera quelqu'un.

Veuillez vous assurer que la TAILLE de votre image est PLUS PETITE que la taille de l'écran en pixels. Sinon, ni "background" ni "background-image" n'ont pas fonctionné pour moi.

La syntaxe de Leandro fonctionne bien. Pensez également à utiliser celui-ci ('background-image' au lieu de 'background')

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

Celui-ci étire l'image au lieu de la répéter si l'image est plus petite (pas besoin de dire "pas de répétition")

0
Ula