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

Question

如何将JSF图像资源引用为CSS背景图像url我经常用图像属性改变按钮的图像，但是有人告诉我用.css(我试过了，但我做不到)来做这是一个很好的实践，我做错了什么？我就是这样做的：1-我的项目的资源储存如下：2-这就是我如何创建了style.css来访问映像.c2 {     background: url(/resources/images/smiley.jpg);  }3-这就是我从页面正文中访问CSS的方式(我确信这是正确的，因为同一文档中的其他类在此页的其他标记中工作)<h:outputStylesheet library="css" name="style.css"  />4-这是如何创建使用已批准的CSS类的示例命令按钮<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>，则导入样式表并由FacesServlet贯通/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表达式。如果没有，那么为了提高效率，它将不再尝试评估CSS文件内容。因此，如果您第一次向CSS文件添加EL表达式，则需要重新启动整个应用程序，以便使JSF重新检查CSS文件。

如果您希望引用诸如PrimeFaces之类的组件库中的资源，则在库名前加上前缀，用:..例如，当您使用PrimeFaces“Start”主题时，由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/Image资源的公共标识符/子文件夹。关键的想法是能够改变整个外观‘n’的感觉，只需改变library(这可以由EL来完成)。然而，您似乎依赖于违约图书馆。在这种情况下，您可以忽略library从你的<h:outputStylesheet>和#{resource}.

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

另见：

• JSF资源库的用途是什么，应该如何使用它？

Answer 2

我在页面中看到了生成的代码：<input type="submit" name="j_idt15" value="" class="c2">我注意到，当我使用图像属性而不是CSS时，我看到了以下情况：<input type="image" src="/demoapp/resources/images/smiley.jpg" name="j_idt14">您为类.c2提供的代码不起作用，但在您最后粘贴的链接上，有一个类似于我的示例，但只有当我更改页面的背景时，才适用于.css类。