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

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

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

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

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

最佳答案

<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文件作为JSF资源提供服务时，CSS中的<h:outputStylesheet>才有效，否则您必须自己对正确的路径进行硬编码）

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