Fatal编程技术网
  • css/
  • .css文件中的Thymeleaf URL表达式

.css文件中的Thymeleaf URL表达式

css

.css文件中的Thymeleaf URL表达式,css,background-image,thymeleaf,relative-path,Css,Background Image,Thymeleaf,Relative Path,我使用的是SpringMVC和Thymeleaf视图引擎。我有一个外部style.css文件，其中包含我页面的css。在CSS文件中，我想引用一个相对的图像URL 这是我的style.css文件： .background { width: 100%; background-image: url('/path/to/image/bg.png'); } 以上内容尝试使用以下URL访问图像，但该URL不存在： http://localhost/path/to/image/bg.png

我使用的是SpringMVC和Thymeleaf视图引擎。我有一个外部style.css文件，其中包含我页面的css。在CSS文件中，我想引用一个相对的图像URL

这是我的style.css文件：

.background {
    width: 100%;
    background-image: url('/path/to/image/bg.png');
}
以上内容尝试使用以下URL访问图像，但该URL不存在：

http://localhost/path/to/image/bg.png
我的真实形象是：

http://localhost/myapp/path/to/image/bg.png
这个StackOverflow问题回答了我关于内联CSS的问题：

但是如何对外部.css文件执行此操作？

将所有图像文件夹结构和图像
路径/to/image/bg.png
放在
图像
文件夹下的
资源/static
下。然后在CSS中将其称为：


.background {
    width: 100%;
    background-image: url('../images/path/to/image/bg.png');
}


然后，您可以在模板中使用此CSS作为：


<head>
    <link rel="stylesheet" media="screen" th:href="@{/css/application.css}"/>
</head>






您的文件结构应如下所示：


背景图像：url（'../images/path/to/image/bg.png'）@完全正确！谢谢你的更正。