将 PrimeFaces 图像资源引用为 CSS 背景图像 url答案

【问题标题】：Reference a PrimeFaces image resource as CSS background image url将 PrimeFaces 图像资源引用为 CSS 背景图像 url
【发布时间】：2015-05-02 15:51:19
【问题描述】：

对 JSF 和 PrimeFaces 有点陌生，我在这里尝试加载资源（具体来说是图像）并将其用作按钮的背景，如下所示：

.greenButton {
    background: url(#{resource['images:ui-bg_gloss-wave_50_6eac2c_500x100.png']});  
}

和<h:outputStyleSheet library="css" name="customStyles.css" />，但它总是解析为：

.greenbutton {
    background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

在我的样式表中。我确实提到了这个问题： "How to reference JSF image resource as CSS background image url" 在这里并做了同样的事情，但如果它是 PrimeFaces 资源，它看起来不起作用？在这种情况下我应该采取不同的做法吗？

图片位于：/resources/primefaces-start/images/ui-bg_gloss-wave_50_6eac2c_500x100.png，由theme.css在/resources/primefaces-startFWIW下加载。

我的默认主题是start:

<context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>start</param-value>
</context-param>

在这种情况下，我实际上是在尝试覆盖某些主题方面，例如按钮颜色。

这是我的文件夹结构，包括我正在修改的 customStyles.css 文件：

webapp
  - pages
  - resources
    - css
      -customStyles.css

【问题讨论】：

缺少“primefaces-start”？
@chRyNaN，它包含在类路径中（在 start-1.0.8.jar 内）。
显示完整的h:outputStylesheet 并启动您的默认主题？
@Kukeltje，将这些细节添加到 OP

标签： css jsf-2 primefaces

【解决方案1】：

您以错误的方式使用library。 library 永远不会像 images、css、js 等。另请参阅有关您找到的问题的bottom part of the answer，这又进一步引用了 JSF 初学者必读的问答What is the JSF resource library for and how should it be used?

给定图像 URL /resources/primefaces-start/images/ui-bg_gloss-wave_50_6eac2c_500x100.png，library 部分显然是 primefaces-start。

所以，应该这样做：

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

【讨论】：