在 Primefaces 中使用 CSS url() 访问图像答案

【问题标题】：Accessing images with CSS url() in Primefaces在 Primefaces 中使用 CSS url() 访问图像
【发布时间】：2011-03-20 11:04:07
【问题描述】：

这是来自 Primefaces 文档：

按钮图标

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

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

<p:commandButton image=”disk”/>

.disk 是一个简单的 CSS 类，带有背景属性：

.磁盘{ 背景图片：url('disk.png') !important; }

我的问题是：这个 url() 指向哪里？换句话说，我应该把我的图片放在哪里以便 CSS 可以访问它？

我已经尝试过 /resources、/resources/img，但没有成功。是的，它使用的是绝对 URL（包括上下文路径），但这使得应用程序不可移植。

【问题讨论】：

【解决方案1】：

看起来您的问题更关注事物的客户端方面，所以即使我不知道 Primefaces，这里还是回答一下吧：

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

如果它在您的 HTML 中（在

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

如果您创建目录图像，那么该目录也将是相对于 CSS 的。

希望这有帮助吗？

【讨论】：

【解决方案2】：

简单的解决方案：

如果您使用的是 JavaServer Faces 2.0，您就有机会将所有资源放在专门设计的目录中。所以你需要在 web 应用中有这个文件夹结构：

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

要在 css 背景中接收图像，您应该输入如下内容：

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

【讨论】：

【解决方案3】：

我曾经遇到过同样的问题，但我认为有关它的文档还不清楚！它适用于 Primefaces commandButton 和类似的（菜单项、子菜单等）：

我所做的是：

从 PrimeFaces 网站的主题库中下载一个主题（例如：aristo 或 redmond）。
将存档解压缩到您的 Web 应用程序 resources 文件夹，（在我的例子中：root/resources/css/aristo
请注意，在 aristo 文件夹中，您有：theme.css 和 /images 文件夹，其中索引 png 图像包含主题使用的所有图标。
如果您打开 theme.css，您会注意到要访问索引图像图标，您应该调用两个类：.ui-icon 和 .ui-icon-theiconyouwant（.ui-icon 使用#{resource['primefaces.......png']} 检索索引 png，并且 .ui-icon-agienicon 通过其在 png 图像中的 X 和 Y 位置（索引）分隔图标。
现在将 theme.css 输出到您的应用程序中，使用 **<h:outputStyleSheet />**. 最好的方法是在模板的标签之间。
所以在你的 xhtml 或 jsp 中，做**<p:commandButton image="ui-icon ui-icon-someicon"} />**.
现在，如果您想添加个人图像以与 <p:commandButton 一起使用，请在 theme.css 中创建类：

.笑脸{ 背景图像： url("#{resource['images/smiley.png']}") !important; /如果不兼容，这将被 Internet Explorer 忽略/ 宽度：16px；高度：16px； }

通常 JSF 会访问资源文件夹中可用的第一个图像文件夹。
现在做：<p:commandButton image="smiley" value="Smile" />

【讨论】：