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表单时他生成了不少累赘代码