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 - ＆gt; 这个包括以下css （它是一个复合组件）
/resources/common/overlay.css
/resources/images/logo.png

现在来了CSS

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

在这种情况下，资源是JSF 2的隐式对象， images 是库，其中JSF应该是look（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。

Answer 3

您是否关注Richfaces demo site上的示例？即。使用小平面并将图像和文本放在封闭元素（例如，跨度或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>

Answer 4

我的文件夹结构如下：

网页 - ＆gt;资源 - ＆gt; css // css页

网页 - ＆gt;资源 - ＆gt; pics // images

网页// xhtml文件

尝试以下方法：

background-image :url("../pics/logo.gif");

..将你提升到一个文件夹级别 / pics将你带到pics目录 /logo.gif为您提供文件

希望这有帮助。

Answer 5

我得到了这个解决方案：使用此内容创建一个新的.css文件

body {
background-image: url(../resources/images/Fondo.GIF);
}

这将以与html相同的方式加载文件。有了这个，您将能够在正文级别（在整个页面上）加载背景文件。在病房之后，您可以在jsf文件中使用此指令加载css文件：

<h:head>
    <h:outputStylesheet name="ps-pagolinea.css" library="css" />
    <h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>

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

5 个答案: