Luc*_*cky 6 css relative-path background-image thymeleaf
我有一个百万美元的模板,我没有导入CSS文件,并希望声明background-image: url{/image.jpg}具有相对图像URL的属性的body元素的样式属性.我想加载URL而不包括应用程序上下文名称(/myapp/).它类似于这里的问题,除了它对我不起作用.
CSS:
<style>
body {
background: url(../img/Background.jpg)
no-repeat center center fixed;
background-size: cover;
}
</style>
但上面的CSS不起作用,它访问图像
http://localhost/img/Background.jpg.
因此,我必须给出url(/myapp/img/Background.jpg)正确加载图像的值.
我有mvc:resources正确设置在配置spring-context.xml为/img/要求正确加载,它在其他地方工作.
弹簧的context.xml
<mvc:resources mapping="img/**" location="/WEB-INF/img/" />
那么如何使用thymeleaf的相对url动态加载后台url image css值呢？
那么,这里是如何使用百里香的内联文本值在css中设置背景图像url属性中的动态相对路径,
<style th:inline="text">
body{
background: url{[[@{/img/Background.jpg}]]}
no-repeat center center fixed;
}
</style>
它使用相对路径加载图像,我们不必在url中指定'myapp'上下文名称.
<body th:style="'background-image:url(' + @{/images/background.jpg} + '); background-repeat: no-repeat, repeat; background-size: cover;'">
</body>
就我而言，这有帮助：将括号从卷曲更改为圆形
<style th:inline="text">
body{
background: url([[@{/img/Background.jpg}]])
no-repeat center center fixed;
}
</style>