如何使用 Richfaces 和 CSS 在 JSF 应用程序中添加背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1013057/
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
How do I add background images in a JSF application using richfaces and CSS?
提问by user125157
I'm making a website Using JSF and richfaces, but I need to do some background images on the drop down menu labels. I saw you can use the style attribute by doing
我正在制作一个使用 JSF 和 Richfaces 的网站，但我需要在下拉菜单标签上做一些背景图片。我看到你可以通过这样做来使用 style 属性
.rich-ddmenu-label {
background-image: url("images/the_image.gif");
}
But that doesn't seem to even try and put a image anywhere.
但这似乎甚至没有尝试将图像放在任何地方。
I can use an image using
我可以使用图像使用
<h:graphicImage/>
I don't know how to put text on top of it though.
我不知道如何将文字放在上面。
What am I doing wrong? How do I insert a background image behind some text?
我究竟做错了什么？如何在某些文本后面插入背景图像？
采纳答案by roryf
Assuming the element in question is getting a class="rich-ddmenu-label"applied to it, the problem is likely the path to the background image.
假设有问题的元素被class="rich-ddmenu-label"应用于它，问题很可能是背景图像的路径。
The path is relative to where the CSS is located. If it's in an external file, it should be relative to that, e.g.:
路径是相对于 CSS 所在位置的。如果它在一个外部文件中，它应该是相对的，例如：
/css/styles.css
/images/the_image.gif
the CSS should be:
CSS 应该是：
background-image: url("../images/the_image.gif");
If the CSS is inline on the HTML page, it will be relative to the current path. So if the page is located at http://server/path/to/page, it will look for the image at http://server/path/to/page/images/the_image.gif, when you probably meant http://server/images/the_image.gif.
如果 CSS 内联在 HTML 页面上，它将相对于当前路径。因此，如果页面位于http://server/path/to/page，它会在 处查找图像http://server/path/to/page/images/the_image.gif，这可能是您的意思http://server/images/the_image.gif。
If that doesn't answer it, please post the generated HTML.
如果这没有回答，请发布生成的 HTML。
回答by lostiniceland
I just had the same problem with JSF 2.0. I had to use a CSS and the solution with the relative path didn't work for me either (like Choghere posted).
我刚刚在JSF 2.0 上遇到了同样的问题。我不得不使用 CSS 并且具有相对路径的解决方案对我也不起作用（就像 Choghere 发布的那样）。
In my book I read that when you use Facelets as VDL (View Declaration Language) it is possible to use expressions even in a plain HTML page. So I got the idea to put a EL directly in my CSS. Note: I didn't have to change the filename or anything.
在我的书中，我读到当您将 Facelets 用作 VDL（查看声明语言）时，即使在纯 HTML 页面中也可以使用表达式。所以我有了直接在我的 CSS 中放置一个 EL 的想法。注意：我不必更改文件名或任何内容。
Here is what I did. but first my filestructure:
这是我所做的。但首先我的文件结构：
- /resources/common/overlay.xhtml -> this one icludes the following css (its a composite component)
- /resources/common/overlay.css
- /resources/images/logo.png
- /resources/common/overlay.xhtml -> 这个包含以下 css（它是一个复合组件）
- /resources/common/overlay.css
- /resources/images/logo.png
Now here comes the CSS:
现在来了 CSS：
.someclass {
background-image:url("#{resource['images:logo.png']}");
}
in this case resourceis an implicit objectof JSF 2, imagesis the librarywhere JSF should look (jsf expects all libraries/files under resources, at least the default ResourceHandler) and then the name of the resource.
在这种情况下，资源是JSF 2的隐式对象，图像是JSF 应该查看的库（jsf 需要资源下的所有库/文件，至少是默认的 ResourceHandler），然后是资源的名称。
For deeper structures it would be:
对于更深的结构，它将是：
#{resource['images/folder:logo.png']}
Hope that helps ;)
希望有帮助;)
回答by Damo
Are you following the example on the Richfaces demo site? ie. use a facet and place the image and text inside an enclosing element (eg. a span or div)
您是否遵循Richfaces 演示站点上的示例？IE。使用 facet 并将图像和文本放在封闭元素内（例如 span 或 div）
<rich:dropDownMenu>
<f:facet name="label">
<h:panelGroup>
<h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
<h:outputText value="File"/>
</h:panelGroup>
</f:facet>
<rich:menuItem submitMode="ajax" value="New"
action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
</rich:menuItem>
...
</rich:dropDownMenu>
回答by Michael
My folder structure is as follows:
我的文件夹结构如下：
web pages->resources->css //css pages
web pages->resources->css //css页面
web pages->resources->pics //images
网页->资源->图片 //图片
web pages //xhtml files
网页 //xhtml 文件
Try the below:
试试下面的：
background-image :url("../pics/logo.gif");
.. moves you up one folder level /pics moves you into the pics directory /logo.gif gives you the file
.. 将您向上移动一个文件夹级别 /pics 将您移动到 pics 目录 /logo.gif 为您提供文件
Hope this helps.
希望这可以帮助。
回答by Juan Miguel Olguin Salguero
I got this solution: create a new .css file with this content
我得到了这个解决方案：用这个内容创建一个新的 .css 文件
body {
background-image: url(../resources/images/Fondo.GIF);
}
this will load the file in the same way html would do. With this, you will be able to load a background file at level of body (on the whole page). After wards you can load the css file with this instruction in the jsf file:
这将以与 html 相同的方式加载文件。有了这个，您将能够在正文级别（在整个页面上）加载背景文件。之后，您可以在 jsf 文件中使用此指令加载 css 文件：
<h:head>
<h:outputStylesheet name="ps-pagolinea.css" library="css" />
<h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>
