java 在 Primefaces 中使用 CSS url() 访问图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3324439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing images with CSS url() in Primefaces
提问by egbokul
This is from the Primefaces docs:
这是来自 Primefaces 文档：
Button Icons
An icon on a button is displayed using CSS and image attribute.
按钮图标
按钮上的图标使用 CSS 和图像属性显示。
<p:commandButton value=”With Icon” image=”disk”/>
<p:commandButton image=”disk”/>
.disk is a simple css class with a background property:
.disk { background-image: url(‘disk.png')!important; }
.disk 是一个带有背景属性的简单 css 类：
.disk { background-image: url('disk.png')!important; }
My question is: where does this url() point to? In other words, where should I put my images so that the CSS could access it?
我的问题是：这个 url() 指向哪里？换句话说，我应该把我的图像放在哪里，以便 CSS 可以访问它？
I've tried /resources, /resources/img, no luck. Yes, it was working with an absolute URL (one that includes the context path), but that makes the application not portable.
我试过 /resources、/resources/img，没有运气。是的，它使用的是绝对 URL（一个包含上下文路径的 URL），但这使得应用程序不可移植。
采纳答案by kander
It looks like your question is more concerned with the client-side aspects of things, so even though I don't know Primefaces, here's a stab at answering it:
看起来你的问题更关心事物的客户端方面，所以即使我不知道 Primefaces，这里也有一个答案：
CSS paths are relative to the location of where the CSS rule is declared.
CSS 路径相对于声明 CSS 规则的位置。
If this is in your HTML (in a <style> block), then disk.png has to be in the same directory as your file.
如果这是在您的 HTML 中（在 <style> 块中），则 disk.png 必须与您的文件位于同一目录中。
If this rule is in a separate CSS file, then disk.png should be in the directory where the CSS file is.
如果此规则位于单独的 CSS 文件中，则 disk.png 应位于 CSS 文件所在的目录中。
If you create a directory images, then the directory will be relative from the CSS too.
如果您创建一个目录图像，那么该目录也将与 CSS 相关。
Hope this helps?
希望这可以帮助？
回答by r.piesnikowski
Simple solution:
简单的解决方案：
IF you are using JavaServer Faces 2.0 you have chance to put all resources inside specially designed directory. So you need to have this folder structure in web app:
如果您使用的是 JavaServer Faces 2.0，您有机会将所有资源放在专门设计的目录中。所以你需要在 web 应用程序中有这个文件夹结构：
-rootdir
--resources
---images
----disk.png
And to receive image in css background you should type something like this:
要在 css 背景中接收图像，您应该输入如下内容：
.disk {
background: url(#{resource['images/disk.png']}) !important;
}
回答by Hanynowsky
I faced the same problem for a moment and I reckon documentation about it is unclear! It works this way for Primefaces commandButton and similar (menuItem, submenu, etc):
我暂时遇到了同样的问题，我认为有关它的文档不清楚！它适用于 Primefaces commandButton 和类似（菜单项、子菜单等）：
What I did is:
我所做的是：
- Download a theme from the theme library in PrimeFaces website (example: aristo or redmond).
- Unzip the archive to your web application resourcesfolder, (in my case: root/resources/css/aristo
- Notice that in aristo folder you have : theme.cssand /images folder where an indexed png image contains all the icons used by the theme.
- If you open the theme.css you'll notice that to access an indexed image icon you should call two classes : .ui-iconand .ui-icon-theiconyouwant(the .ui-icon retrieves the index png using
#{resource['primefaces.......png']}and .ui-icon-agivenicon delimit the icon by its X & Y position (index) in the png image). - Now output the theme.css into you application, by using
**<h:outputStyleSheet />**.Best way to do it is between tags of your template. - So in your xhtml or jsp, do
**<p:commandButton image="ui-icon ui-icon-someicon"} />**. Now if you want to add your personal images to use with a
<p:commandButton, create classes in theme.css :.smiley { background-image: url("#{resource['images/smiley.png']}") !important; /this will be ignored by Internet Explorer if not compatible/ width: 16px; height: 16px; }
Normally JSF accesses the first images folder available within your resources folder.
- Now do:
<p:commandButton image="smiley" value="Smile" />
- 从 PrimeFaces 网站的主题库下载主题（例如：aristo 或 redmond）。
- 将存档解压缩到您的 Web 应用程序资源文件夹（在我的情况下：root/resources/css/aristo
- 请注意，在 aristo 文件夹中，您有：theme.css和 /images 文件夹，其中索引的 png 图像包含主题使用的所有图标。
- 如果您打开 theme.css，您会注意到要访问索引图像图标，您应该调用两个类：.ui-icon和.ui-icon-theiconyouwant（.ui-icon 使用
#{resource['primefaces.......png']}和 .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 将忽略此项/ width: 16px; 高度：16px；}
通常 JSF 访问资源文件夹中可用的第一个图像文件夹。
- 现在做：
<p:commandButton image="smiley" value="Smile" />
