Question

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

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

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

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

Answer 1

<p:graphicImage>生成HTML <img>元素。您不应该通过<img>将精灵文件显示为整个图像。您应该将精灵用作块级元素的背景图像，例如<div>。

E.g。

<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;
}

（注意：CSS中的#{resource}只有在您使用<h:outputStylesheet>将CSS文件作为JSF资源提供时才有效，否则您需要自己硬编码正确的路径）

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

如何使用primefaces / jsf部分显示图像

1 个答案: