如何将JSF图像资源引用为CSS背景图像url

Question

我经常使用图像属性更改按钮的图像,但有人告诉我,使用.css这是一个很好的做法我试过但我不能,我做错了什么？这就是我做的:

1 - 我的项目资源存储如下:

2 - 这就是我创建style.css以访问图像的方式

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

3 - 这是我从我的页面正文访问css的方式(我确定这是正确的,因为同一文档中的其他类适用于此页面中的其他标记)

<h:outputStylesheet library="css" name="style.css"  />

4 - 这是创建使用适当的css类的示例commandButton的方法

<h:commandButton styleClass="c2"/>

我认为问题出现在.css中,我尝试了几种组合但没有效果:

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg); 

哪里出错了？

更新 我设法通过以下代码使其工作:

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

注意我使用css(右)和使用图像属性时的差异(左)

我怎么能解决这个问题,以便显示保持图像？

Answer 1

导入CSS样式表时<h:outputStyleSheet>,样式表由FacesServletthrough 导入和处理/javax.faces.resource/*.查看<link>指向相关样式表的生成元素,您将理解.

您必须更改url()要使用的所有依赖项#{resource['library:location']}.然后,JSF将使用正确的路径自动替换它.鉴于您的文件夹结构,您需要更换

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

通过

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

假设您的webapp上下文名称是playground您FacesServlet的映射*.xhtml,那么上面的内容最终应该返回到返回的CSS文件中,如下所示

.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

需要注意的是,JSF实现仅在CSS文件的第一个请求期间确定它是否包含EL表达式.如果没有那么它将为了效率而不再尝试EL评估CSS文件内容.因此,如果您是第一次将EL表达式添加到CSS文件中,那么您需要重新启动整个应用程序才能让JSF重新检查CSS文件.

如果您想从组件库(如PrimeFaces)引用资源,则在库名称前加上前缀,用:.分隔.例如,当您使用由标识的PrimeFaces"开始"主题时primefaces-start

.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}

这将生成为

.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

也可以看看:

• 如何在Facelets模板中引用CSS/JS /图像资源？
• 将JSF前缀更改为后缀映射会强制我重新应用CSS背景图像上的映射

与具体问题无关,你如何使用它的library方式并不完全正确.它应该是所有相关CSS/JS /图像资源的公共标识符/子文件夹.关键的想法是通过改变library(可以通过EL完成)来改变整个look'n'feel .但您似乎依赖于默认库.在这种情况下,你可以省略library你的<h:outputStylesheet>和#{resource}.

<h:outputStylesheet name="css/style.css"  />

也可以看看:

• 什么是JSF资源库以及如何使用它？