使用Primefaces中的CSS url()访问图像

Question

这来自Primefaces文档:

按钮图标

使用CSS和图像属性显示按钮上的图标.

<p:commandButton value=”With Icon” image=”disk”/>

<p:commandButton image=”disk”/>

.disk是一个带有background属性的简单css类:

.disk {background-image:url('disk.png')!important; }

我的问题是:这个url()指向哪里？换句话说,我应该在哪里放置我的图像以便CSS可以访问它？

我试过/资源,/ resources/img,没有运气.是的,它使用绝对URL(包含上下文路径的URL),但这使得应用程序不可移植.

Answer 1

简单方案:

如果您使用的是JavaServer Faces 2.0,则有机会将所有资源放在专门设计的目录中.所以你需要在web app中拥有这个文件夹结构:

-rootdir
--resources
---images
----disk.png

要在css背景中接收图像,您应该键入以下内容:

.disk {
background: url(#{resource['images/disk.png']}) !important;
}

Answer 2

看起来你的问题更关心的是客户端方面的事情，所以即使我不了解 Primefaces，这里还是可以回答这个问题：

CSS 路径与声明 CSS 规则的位置相关。

如果它位于您的 HTML 中（在 <style> 块中），则 disk.png 必须与您的文件位于同一目录中。

如果此规则位于单独的 CSS 文件中，则 disk.png 应位于 CSS 文件所在的目录中。

如果您创建一个图像目录，那么该目录也将与 CSS 相关。

希望这可以帮助？