0

我有一个精灵图像。我想从那里只显示一个图标。如何使用 jsf/primefaces 显示？

我尝试了以下代码，但显示了完整的图像。

<p:graphicImage value="/resources/images/image.png" styleClass="lockedImage"/>

.lockedImage{
background-position: -110px -98px;
}
4

1 回答 1

3

<p:graphicImage>生成一个 HTML<img>元素。您不应该通过<img>. 您应该使用精灵作为块级元素的背景图像，例如<div>.

例如

<div class="lockedImage" />

和

.lockedImage {
    width: 16px; /* Set this to icon width. */
    height: 16px; /* Set this to icon height. */
    background-image: url(#{resource['images/image.png']});
    background-position: -110px 98px;
}

（注意：#{resource}在 CSS 中仅当您将<h:outputStylesheet>CSS 文件用作 JSF 资源时才有效，否则您必须自己硬编码正确的路径）

请注意，此问题与 JSF 完全无关。它只是基本的 HTML/CSS。JSF 在这个问题的上下文中仅仅是一个 HTML/CSS 代码生成器。我强烈建议暂停 JSF 并学习基本的 HTML/CSS，以便更好地理解 JSF。如有必要，您可以在 JSF中生成<div>using 。<h:panelGroup layout="block">

于 2013-07-03T12:10:34.503 回答