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

Question

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

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

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

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

Answer 1

<p:graphicImage>生成一个 HTML <img>元素。您不应该通过 <img> 将 Sprite 文件显示为整个图像.您应该使用 Sprite 作为 block 级元素的背景图像，例如<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;
}

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

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