如何设置背景网址的cme文件在麝香草？ [英] How to set background url for css files in thymeleaf?

问题描述

我有一个thymleaf模板，其中我没有导入css文件，并想要声明的身体元素的风格属性 background-image：url {/image.jpg} property with relavtive image url。我想加载URL而不指定上下文名称。它与这里相同，除了它din't为我工作。

CSS：

  style> 
 body {
 background：url（../ img / Background.jpg）
无重复中心中心固定; 
 background-size：cover; 
} 
< / style> 
  

但是上面的css不工作，它访问了

  http：//localhost/img/Background.jpg。 
  

所以，我不得不把URL作为 url（/ myapp / img /Background.jpg）以便正确加载图片。

我有 mvc：resources 配置正确设置在 spring-context.xml 为 / img / 请求正确加载，其他地方。

spring-context.xml

 < mvc：resources mapping =img / **location =/ WEB-INF / img //>所以如何使用thymeleaf的相对url动态加载背景url图像css值。
解决方案
因此，以下是如何在css中使用thymeleaf的内联文本值设置背景图片网址属性中的动态相对路径，
 < style th：inline =text> 
 body {
 background：url {[[@ {/ img / Background.jpg}]]} 
无重复中心中心固定; 
} 
< / style> 
  
使用相对路径加载图像，我们不必指定'myapp'上下文名称在网址。
 
I have a thymleaf template where I don't have css files imported and wanted to declare style attibute for the body element with background-image: url{/image.jpg} property with relavtive image url. I wanted to load the URL without specifying the context name it. Its the same problem over here, except it din't work for me.

CSS:
<style>
body {
    background: url(../img/Background.jpg)
                no-repeat center center fixed;
    background-size: cover;
}
</style>
But the above css doesn't work and it accessed the image at 
http://localhost/img/Background.jpg. 
So, I had to give the url as url(/myapp/img/Background.jpg) for the image to load properly.

I have the mvc:resources configuration properly set in spring-context.xml for /img/ request to load properly and it works in other places. 

spring-context.xml
<mvc:resources mapping="img/**" location="/WEB-INF/img/" />
So how to load the background url image css value dynamically using thymeleaf's relative url?.
解决方案
So, here's how to set dynamic relative paths in background image url property in the css using thymeleaf's inline text value,
<style th:inline="text">
    body{
        background: url{[[@{/img/Background.jpg}]]}
                    no-repeat center center fixed;
    }
</style>
which loads the image using relative path and we don't have to specific the 'myapp' context name in the url.

                        
这篇关于如何设置背景网址的cme文件在麝香草？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！