thymeleaf css url()
时间: 2023-11-05 07:04:39 浏览: 58
在 Thymeleaf 中,你可以使用 `th:href` 属性来引用 CSS 文件,并使用 `@{}` 语法来指定文件路径。例如:
```html
<link rel="stylesheet" type="text/css" th:href="@{/static/css/styles.css}">
```
其中,`{/static/css/styles.css}` 是相对于应用程序根目录的路径。如果你的 CSS 文件位于不同的目录下,你可以相应地更改路径。
如果你需要在 CSS 文件中使用 `url()` 函数来引用其他资源(如图片),你可以使用 `th:src` 属性来指定路径。例如:
```css
background-image: url(/static/images/background.jpg);
```
你可以将其重写为:
```css
background-image: url([[@{/static/images/background.jpg}]]);
```
注意,这里使用了双重方括号 `[[ ]]` 来表示内联表达式。这是因为在 CSS 中,花括号 `{ }` 用于定义样式规则,Thymeleaf 表达式中也包含花括号,为了避免冲突,需要使用不同的括号。
相关问题
Thymeleaf中给background url设值
可以通过Thymeleaf的属性绑定语法,在HTML标签中设置background url属性的值,示例如下:
```html
<div style="background-image: url([[${imageUrl}]]);"></div>
```
其中,`[[${imageUrl}]]`表示从后端传递过来的图片URL地址,Thymeleaf会将其绑定到HTML标签的style属性中的background-image属性上。注意,这里的双方括号是必须的,因为它们告诉Thymeleaf这是一个表达式。
另外,如果是使用CSS样式表来设置背景图片,可以在CSS文件中引用Thymeleaf变量,示例如下:
```css
div {
background-image: url([[${imageUrl}]]);
}
```
同样需要使用双方括号来引用Thymeleaf变量。
thymeleaf模板中,怎么写css样式
在Thymeleaf模板中,可以通过以下方式引入CSS样式:
1. 在HTML文件中使用link标签引入CSS文件,例如:
```html
<link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}" />
```
其中`th:href`属性表示在服务器端解析该属性值,`@{/static/css/style.css}`表示使用Thymeleaf的URL表达式,指向CSS文件的相对路径。
2. 直接在HTML文件中定义CSS样式,例如:
```html
<style>
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
</style>
```
这种方式适用于定义一些简单的样式,但不建议在模板文件中大量使用此种方式。
在Thymeleaf模板中,还可以通过其他方式引入CSS样式,具体可以参考Thymeleaf官方文档。