6

这是来自 Primefaces 文档：

按钮图标

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

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

<p:commandButton image=”disk”/>

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

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

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

我试过/resources，/resources/img，没有运气。是的，它使用的是绝对 URL（包含上下文路径的 URL），但这使得应用程序不可移植。

4

3 回答 3

11

简单的解决方案：

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

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

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

.disk {
background: url(#{resource['images/disk.png']}) !important;
}
于 2011-02-01T16:02:12.883 回答
0

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

CSS 路径相对于声明 CSS 规则的位置。

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

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

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

希望这可以帮助？

于 2010-07-24T09:41:04.300 回答
0

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

我所做的是：

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

  • 现在，如果您想添加您的个人图像以与 a 一起使用，请<p:commandButton在 theme.css 中创建类：

    .smiley { background-image: url("#{resource['images/smiley.png']}") !important; /如果不兼容，这将被 Internet Explorer 忽略/ 宽度：16px；高度：16px；}

    通常，JSF 访问资源文件夹中可用的第一个图像文件夹。

  • 现在做：<p:commandButton image="smiley" value="Smile" />
于 2011-06-14T08:41:28.040 回答