我试过，但我不能，我做错了什么？这是我做的：
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(右)和当我使用图像属性(左)时的区别
解决方法
您必须更改所有url()依赖关系以使用#{resource [‘library：location’]}。 JSF将自动替换为正确的路径。给定您的文件夹结构，您需要更换
.c2 {
background: url("/resources/images/smiley.jpg");
}
通过
.c2 {
background: url("#{resource['images/smiley.jpg']}");
}
假设您的webapp上下文名称是游乐场，并且您的FacesServlet映射到* .xhtml，则上述应该在返回的CSS文件中结束如下
.c2 {
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}
应该注意的是，JSF实现将仅在CSS文件的第一个请求中确定，如果它包含EL表达式。如果不这样做，效率就不会再试图EL评估CSS文件内容了。因此，如果您首次向CSS文件添加EL表达式，那么您需要重新启动整个应用程序才能使JSF重新检查CSS文件。
如果您想从一个组件库(如PrimeFaces)中引用资源，那么在库名称前面加上：。例如。当您使用PrimeFaces“开始”主题，由主题 – 开始标识
.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");
}
也可以看看：
> How to reference CSS / JS / image resource in Facelets template?
> Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
与具体问题无关，使用图书馆的方式并不完全正确。它是所有相关CSS / JS /图像资源的常用标识符/子文件夹。关键的想法是通过改变图书馆(可以通过EL完成)来改变整个外观。你似乎依靠默认的库。在这种情况下，您可以从< h：outputStylesheet>中省略库。和#{resource}。
<h:outputStylesheet name="css/style.css" />
也可以看看：
> What is the JSF resource library for and how should it be used?
