CSS JSF commandLink 与图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10224398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSF commandLink with image
提问by MaximG
I have problem with <p:commandLink>. I want make hover effect but I can't load image to <p:graphicImage>via CSS.
我有问题<p:commandLink>。我想要悬停效果，但我无法<p:graphicImage>通过 CSS加载图像。
CSS:
CSS：
.accountEditBtn {
background-image:
url('#{request.contextPath}/resources/image/pencil_black.png');
}
JSF:
JSF：
<p:commandLink
update="@form"
actionListener="#{someBean.someListener}">
<h:graphicImage styleClass="accountEditBtn" />
</p:commandLink>
I see empty rectangle with border.
我看到带边框的空矩形。
But when I add alt to graphicImage, I get image over text from alt...
但是当我将 alt 添加到graphicImage时，我从 alt 中获取了文本上的图像...
Where my mistake? Thank you. p.s. typing error - classType -> styleClass
我的错在哪里？谢谢你。ps 输入错误 - classType -> styleClass
回答by Daniel
try using styleClass instead of <h:graphicImage>
尝试使用 styleClass 而不是 <h:graphicImage>
<p:commandLink
styleClass="accountEditBtn"
update="@form"
actionListener="#{someBean.someListener}"/>
try this class
试试这门课
.accountEditBtn { background-image: url('../resources/image/pencil_black.png'); }
B.T.W
顺便提一句
isn't is should be images ? or it is image (folder name)
不应该是图像吗？或者它是图像（文件夹名称）
take a look at this as well.. in case you want commandButton with image: PrimeFaces icons
也看看这个 .. 如果你想要带有图像的 commandButton：PrimeFaces 图标
回答by roel
Why don't you use
你为什么不使用
<p:commandButton ... icon="yourbuttonstyleclass"/>
and in css
并在 css 中
.yourbuttonstyleclass {
background-image: url('../images/yourimage.png') !important;
}
