11

我正在使用 JSF 和 Richfaces 制作网站，但我需要在下拉菜单标签上做一些背景图片。我看到您可以通过执行来使用样式属性

.rich-ddmenu-label {

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

}

但这似乎并没有尝试将图像放在任何地方。

我可以使用图像

<h:graphicImage/>

我不知道如何将文本放在上面。

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

4

5 回答 5

69

我刚刚遇到了与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']}"); 
}

在这种情况下，资源是JSF 2的隐式对象，图像是 JSF 应该查看的库（jsf 期望资源下的所有库/文件，至少是默认的 ResourceHandler），然后是资源的名称。

对于更深的结构，它将是：

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

希望有帮助；）

于 2010-01-09T15:23:37.297 回答
5

假设有问题的元素被class="rich-ddmenu-label"应用到它，问题很可能是背景图像的路径。

路径相对于 CSS 所在的位置。如果它在一个外部文件中，它应该是相对的，例如：

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

CSS应该是：

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

如果 CSS 在 HTML 页面上是内联的，它将相对于当前路径。因此，如果页面位于 at http://server/path/to/page，它将http://server/path/to/page/images/the_image.gif在您可能想要的位置查找图像http://server/images/the_image.gif。

如果这不能回答它，请发布生成的 HTML。

于 2009-06-18T16:14:18.327 回答
2

您是否按照Richfaces 演示站点上的示例进行操作？IE。使用构面并将图像和文本放置在封闭元素内（例如跨度或 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>
于 2009-06-18T14:52:58.167 回答
2

我的文件夹结构如下：

网页->资源->css //css页面

网页->资源->图片//图像

网页//xhtml 文件

试试下面的：

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

.. 将您向上移动一个文件夹级别 /pics 将您移动到 ​​pics 目录 /logo.gif 为您提供文件

希望这可以帮助。

于 2010-04-28T12:23:33.783 回答
1

我得到了这个解决方案：用这个内容创建一个新的 .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>
于 2011-01-25T16:35:45.770 回答