春季CSS圖像加載

Question

我正在使用彈簧3.0.7爲我的Web應用程序。我想在一個CSS文件中像這樣從我的資源位置加載圖像：

.tag { 
    background: transparent url(/resources/img/bg.gif) no-repeat; 
    background-position: 0 50%; 
    padding-left: 50px 
} 

我可以輕鬆地將我的靜態資源的JSP文件，如下圖所示沒有任何問題：

<c:url value="/resources/css/main.css" /> 

我靜資源處理程序已配置如下圖所示：

<mvc:resources mapping="/resources/**" location="/web-resources/"/> 

至於說ealier，我可以加載在JSP文件資源沒有問題，但不能讓圖像在我的CSS加載。任何人都可以幫助加載圖像的CSS文件！

Answer 1

如果你的文件夾樹是這樣的：

+resources 
-css 
    -main.css 

-img 
    -lots_of_img.jpg 

然後是更容易只是url('../img/bg.gif')。

Answer 2

的CSS路徑相對於CSS文件的位置：

.tag { 
    background: transparent url("resources/img/bg.gif") no-repeat; 
    background-position: 0 50%; 
    padding-left: 50px 
} 

或

.tag { 
    background: transparent url("../resources/img/bg.gif") no-repeat; 
    background-position: 0 50%; 
    padding-left: 50px 
} 

或基於結構邏輯

.tag { 
    background: transparent url("../img/bg.gif") no-repeat; 
    background-position: 0 50%; 
    padding-left: 50px 
} 

這一切都取決於你的目錄結構！

您可以閱讀更多關於此here和here！