如何使用richfaces和CSS在JSF应用程序中添加背景图像？

Question

我正在制作一个使用JSF和richfaces的网站,但我需要在下拉菜单标签上做一些背景图片.我看到你可以通过这样做来使用style属性

.rich-ddmenu-label {

    background-image: url("images/the_image.gif");

}

但这似乎甚至没有尝试将图像放在任何地方.

我可以使用图像

<h:graphicImage/>

我不知道怎么把文字放在它上面.

我究竟做错了什么？如何在某些文本后面插入背景图像？

Answer 1

我刚刚遇到了与JSF 2.0相同的问题.我不得不使用一个CSS而且相对路径的解决方案对我来说也不起作用(像Choghere发布的那样).

在我的书中,我读到当你使用Facelets作为VDL(查看声明语言)时,甚至可以在纯HTML页面中使用表达式.所以我有了把EL直接放在我的CSS中的想法.注意:我没有必要更改文件名或任何内容.

这就是我做的.但首先是我的文件结构

• /resources/common/overlay.xhtml - >这个包含以下css(它是一个复合组件)
• /resources/common/overlay.css
• /resources/images/logo.png

现在来了CSS

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

在这种情况下,resource是JSF 2 的隐式对象,images是JSF应该看的库(jsf期望资源下的所有库/文件,至少是默认的ResourceHandler),然后是资源的名称.

对于更深的结构,它将是

#{resource['images/folder:logo.png']}

希望有所帮助;)

Answer 2

假设有问题的元素正在class="rich-ddmenu-label"应用它,问题可能是背景图像的路径.

该路径相对于CSS所在的位置.如果它在外部文件中,它应该是相对的,例如:

/css/styles.css
/images/the_image.gif

CSS应该是:

background-image: url("../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.

如果没有回答,请发布生成的HTML.