jsf開發心得(3)-jsf應用中css運用背景圖片顯示不了的問題

   在jsf中模板應用，若是引用css仍是按照傳統的link標籤連接的話，若是網頁存放的目錄不一樣，仍是會產生相對路徑問題。

   而在jsf中有兩種方式避免了目錄不一樣產生的相對路徑出錯的狀況。

   1、 表達式引用資源：  <link href="#{resource['css:common.css']}" rel="stylesheet" type="text/css" />  

   2、  <h:outputStylesheet library="css" name="common.css"></h:outputStylesheet>

   這兩種方式都是將資源文件放在web應用下的resources目錄的css子目錄下。能夠從生產的html源碼看出他們都被轉成了絕對路徑的形式

    <link href="/egoshop-1.0.0/javax.faces.resource/common.css.xhtml?ln=css" rel="stylesheet" type="text/css" />

    不知是jsf故意爲之，仍是一個bug，在css文件中的背景設置圖片引用時，按照css傳統的引用法引用不了。

    好比：css文件路徑「resources/css/common.css」。某一個圖片的路「resources/img/one.gif",如今要在common.css的元素設置背景圖片，若是按照標準的圖片引用路徑是「backgrond:'../img/one.gif'」

可是若是引用css文件是上面兩種方法引用的，圖片顯示不了。

    挺鬱悶的吧？jsf既然解決了引用資源相對路徑的問題，可是又產生了另外一種問題（相對咱們平時用css的習慣，也是標準）。。。。

    不過解決的辦法不是沒有！

    這得須要瞭解瀏覽器下載文件的方式。服務器將html文檔返回給瀏覽器，而html文檔包含了不少須要再次下載的資源，如圖片等。那麼瀏覽器就根據資源的路徑去下載。絕對路徑是沒有什麼疑問的，但關鍵是相對路徑。

    若是文檔指定了base元數據，以base指定的src爲準區套資源的絕對路徑。若是沒有指定base就根據當前文檔的url去套資源的絕對路徑。

    好吧，指定base的src屬性吧！可是仍是對css裏的圖片路徑沒產生影響。。。。

    問題沒有解決！！！

    那麼css文件裏的圖片路徑是以什麼爲基準的呢？

    比較沒有用jsf技術時css引用的形式：

    <link href="/egoshop-1.0.0/resources/css/common.css" rel="stylesheet" type="text/css" />

    而用了jsf技術後css引用的形式

    <link href="/egoshop-1.0.0/javax.faces.resource/common.css.xhtml?ln=css" rel="stylesheet" type="text/css" />

    能夠發現，css文件尋找圖片資源是以引用css文件 的路徑爲基準的。也就是「/」

    而如今css裏的圖片路徑「../img/one.gif」，那麼他根據<link href="/egoshop-1.0.0/javax.faces.resource/common.css.xhtml?ln=css" rel="stylesheet" type="text/css" />推斷圖片路徑爲」/egoshop-1.0.0/javax.faces.resource/img/one.gif「

那固然沒有這個路徑的了

   解決的辦法是（若是按照標準的jsf應用資源目錄）：

   background-image: url("../resources/img/one.gif");

    若是不用jsf的圖片引用路徑爲：

    background-image: url("../img/one.gif");

    看多了什麼？

    若是之後咱們不用jsf技術了，要移植到其餘的應用中，這些圖片路徑還得從新去掉」/resources「

    無語吧？

    jsf是給咱們帶來了方便，可也帶來了麻煩和不少沒必要要的多餘的標籤和累贅代碼，如泥用jsf表單時他生成了不少累贅代碼