2015-03-19 23 views
8

Cách đặt thuộc tính nền của thẻ kiểu với url được phân giải thymeleaf.Đặt thuộc tính kiểu CSS với thymeleaf

Tôi có

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

<img th:src="${@/<path-to-image>}"> tương đương cho việc thiết lập phong cách thuộc tính trong thymeleaf.

Trả lời

27

Bạn có thể đạt được điều đó nếu bạn sử dụng th:style để thiết lập thuộc tính phong cách của bạn:

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

Kiểm tra this thread trên diễn đàn thymeleaf.

+3

Cảm ơn. Cú pháp có thể là một nhức đầu thực sự ở lần. – SpaceBeers

+0

làm cách nào tôi có thể chuyển biến từ phần phụ trợ sang thuộc tính chiều rộng –

0

Tôi hy vọng nó sẽ giúp ai đó.

Hãy đảm bảo rằng SIZE hình ảnh của bạn nhỏ hơn kích thước màn hình tính bằng pixel. Nếu không, không phải 'nền' cũng như 'background-image' không hoạt động đối với tôi.

Cú pháp của Leandro hoạt động tốt. Xem xét sử dụng này là tốt ('background-image' thay vì 'nền')

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

Cái này trải dài ra các hình ảnh thay vì lặp lại nó nếu ảnh nhỏ (không cần phải nêu 'no-repeat')

Các vấn đề liên quan