css - commanbutton 中的 Primefaces 自定义图标

Question

我想要一个 PNG 文件 (26*26px) 作为我的 Primefaces 按钮的背景。

这是我的CSS类

.btnCreate {
border-radius: 0px;
background-image: url("#{resource['images/create.png']}") !important;
width: 26px;
height: 26px;
}

这就是按钮

<p:commandButton icon="btnCreate" title="Icon Only" />

结果如下:

outcome

如何将图片放在按钮中间？

Edit2: 正如一些人建议的那样，我尝试更改值 @background-position 但这也无济于事，因为它只是剪切图像并仅显示右边框或左边框

outcome after back-position:-10px-10

Answer 1

只需使用 background-position :

.btnCreate {
  border-radius: 0px;
  background-image: url("#{resource['images/create.png']}") !important;
  width: 26px;
  height: 26px;
  background-position: -10px -10px;
}

编辑:这里有完整的例子:

首先创建只有图标的按钮:

<p:commandButton icon="btnCreate" title="Icon Only"  styleClass="iconOnlyButton"/>

现在，为只有图标的按钮定义样式:

.iconOnlyButton{
    background: transparent !important;
    border: none !important;
    margin: 0;
}

和图标:

.btnCreate {
    background-image: url("#{resource['images/create.png']}") !important;
    width: 26px;
    height: 26px;
    background-position: 0px 0px;
}

将 border 、 background-color 等按钮样式添加到 CSS 中的 iconOnlyButton 类。在 btnCreate 中只保留图像的属性。您可以在任何现代浏览器(如 Chrome 或 Firefox)中即时调整 background-position