与Primefaces

CSS URL（）访问图像这是从Primefaces文档：与Primefaces

按键图标

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

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

<p:commandButton image=”disk”/>

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

.disk { 背景图片：URL（“disk.png”）重要; }

我的问题是：这个url（）指向哪里？换句话说，我应该在哪里放置图像以便CSS可以访问它？

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

来源

2010-07-24 egbokul

它看起来像你的问题更关注的是事物的客户端方面，所以尽管我不知道Primefaces，在这里回答它是一个刺：

CSS路径是相对的位置声明CSS规则的地方。

如果这是在您的HTML中（<风格>块），那么disk.png必须与您的文件在同一个目录中。

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

如果您创建了一个目录图片，那么该目录也将相对来自CSS。

希望这会帮助吗？

来源

2010-07-24 09:41:04 kander

宾果！ ;-）感谢你及时的答复。 – egbokul 2010-07-24 12:15:49

不客气:) – kander 2010-07-24 13:48:29

简单的解决方案：

如果您正在使用JavaServer Faces 2.0，你就有机会把所有的资源特别设计的目录中。所以，你需要在Web应用程序在此文件夹结构：

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

，并接收在CSS背景图片，你须是这样的：

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

来源

2011-02-01 16:02:12

谢谢你做到了！ – 2013-12-11 19:37:56

我面临同样的问题了一会儿，我估计它的文档还不清楚！是这样工作的Primefaces命令按钮和类似（菜单项，子菜单等）：

我所做的是：

下载从主题库中的主题PrimeFaces网站（例如：ARISTO或微软）。
解压缩归档到Web应用程序资源文件夹，（在我的情况：
请注意，在ARISTO文件夹中有根/资源/ CSS/ARISTO：theme.css和/图像文件夹中索引的PNG图像包含由主题使用的所有图标

如果打开theme.css你会发现，访问索引图像图标，你应该叫两个类：的.ui图标和的.ui -icon-theiconyouwant（.ui-icon使用检索索引png和.ui-icon-agivenicon通过其在图像中的X位置（索引）的X &划分图标。

现在通过使用**<h:outputStyleSheet />**.将theme.css输出到您的应用程序中，最好的方法是在您的模板标签之间。
在你的XHTML或JSP
所以，做**<p:commandButton image="ui-icon ui-icon-someicon"} />**.

现在如果你想增加你的个人形象与<p:commandButton使用，在theme.css创建类：

.smiley { 背景图像： url（“＃{resource ['images/smiley.png']}”）！important;/如果不兼容，Internet Explorer将忽略此项/ width：16px; height：16px; }

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

现在做：<p:commandButton image="smiley" value="Smile" />

来源

2011-06-14 08:41:28 Hanynowsky

回答

相关问题