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

Posted 2023-02-22

【中文标题】如何使用 Richfaces 和 CSS 在 JSF 应用程序中添加背景图像？

【英文标题】：How do I add background images in a JSF application using richfaces and CSS?

【发布时间】：2010-11-04 00:36:39

【问题描述】：

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

.rich-ddmenu-label 

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

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

我可以使用图片

<h:graphicImage/>

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

我做错了什么？如何在某些文字后面插入背景图片？

【参考方案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 的 implicit object，images 是 JSF 应该存放的 library看看（jsf 期望资源下的所有库/文件，至少是默认的 ResourceHandler），然后是资源的名称。

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

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

希望有所帮助；）

【讨论】：

感谢它对我来说很好，最后一种方法，例如：background-image:url("#resource['images/bg-pattern-t.gif']")

实际上这正是我所看到的。一种在 css 中访问资源而无需编写像 /ressources/...这样的绝对路径的方法

如果您的图像文件夹嵌套在下一层（即：bootstrap/img），EL 将如下所示： url(#resource['bootstrap/img:icon.png'] );

任何线索如何用主题来做到这一点？

@Brando_Calrissian 这不是它的工作原理。要更好地了解 JSF 资源库，请查看What is the JSF resource library for and how should it be used?

【参考方案2】：

我得到了这个解决方案： 使用此内容创建一个新的 .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>

【参考方案3】：

我的文件夹结构如下：

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

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

网页 //xhtml 文件

试试下面的：

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

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

希望这会有所帮助。

【参考方案4】：

假设有问题的元素应用了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。

【讨论】：

我只需要在 /images/the_image.gif 之前添加两个溺爱。非常非常感谢！

不完全是 JSF 的正确答案。请参阅下面有 23 票的答案

【参考方案5】：

您是否遵循Richfaces demo site 上的示例？ 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>

【讨论】：

这显示了如何将图像放在单词旁边。我需要在图像上放置一些文字。很多地方都展示了如何使用 HTML 和 CSS 来做到这一点，但我无法让它与 Richfaces 和 CSS 一起使用。

只需将背景图像应用到 panelGroup（或 div 或您使用的任何内容）