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

Question

对 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 并由 /resources/primefaces-start FWIW 下的 theme.css 加载。

我的默认主题是 start:

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

我实际上是在尝试覆盖某些主题方面，例如本例中的按钮颜色。

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

webapp
  - pages
  - resources
    - css
      -customStyles.css

Answer 1

您使用 library 的方式有误。 library 永远不可能像 images、css、js 等以合理的方式出现。另见 bottom part of the answer on the question you found, which in turn references further to a must-read Q&A for JSF starters What is the JSF resource library for and how should it be used?

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

所以，应该这样做：

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

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

Reference a PrimeFaces image resource as CSS background image url

css

primefaces

jsf-2