css - JSF commandLink 与图像

Question

我有问题<p:commandLink>。我想制作悬停效果，但我无法<p:graphicImage>通过 CSS 加载图像。

CSS：

.accountEditBtn {
    background-image:
    url('#{request.contextPath}/resources/image/pencil_black.png');
}

JSF：

<p:commandLink
    update="@form"
    actionListener="#{someBean.someListener}">
    <h:graphicImage styleClass="accountEditBtn" />
</p:commandLink>

我看到带边框的空矩形。

但是当我将alt添加到graphicImage时，我会从alt中获取图像而不是文本......

我的错在哪里？谢谢你。ps 输入错误 - classType -> styleClass

score 6 · Accepted Answer

尝试使用 styleClass 而不是<h:graphicImage>

<p:commandLink 
   styleClass="accountEditBtn"
   update="@form"
   actionListener="#{someBean.someListener}"/>

试试这门课

.accountEditBtn { background-image: url('../resources/image/pencil_black.png'); }

顺便提一句

不是应该是图像吗？或者它是图像（文件夹名称）

也看看这个..如果你想要带有图像的命令按钮：PrimeFaces 图标

score 2 · Accepted Answer

你为什么不使用

<p:commandButton ... icon="yourbuttonstyleclass"/>

在CSS中

.yourbuttonstyleclass {  
background-image: url('../images/yourimage.png') !important;
}

2 回答 2