如何在 <p:commandLink> 中显示整个背景图像？

Question

我有一个<p:commandLink>，我想将图片显示为 CSS 背景图片：

.button{
    background-image: url(http://www.lefinnois.net/aqua/aqua1.jpg);
    background-size: 50px;    
}

<p:commandLink update="media" value="Kaydet"
    action="#{productView.save}" styleClass="button">
</p:commandLink>

但我需要命令链接与背景图像具有相同的宽度和高度。如果我将以下属性添加到 CSS

background-size: 50px;

然后我可以看到图像的一小部分。如果我不添加这个，我就看不到图像。

如果我尝试将其添加到 CSS 中

width: 100px;
height: 50px;

然后什么都没有改变。

Answer 1

p:commandLink 生成的标签 <a/> 是一个内联 html 元素，因此无法设置其大小。您可以通过将 display css 属性设置为 inline-block 来覆盖它 - 或改用 p:commandButton。