Question

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

这是我的css课程

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

这就是Button

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

结果如下：

outcome

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

Edit2：正如有些人建议我尝试更改@ background-position的值，但这既没有帮助，因为它只是剪切图像并仅显示右边框或左边框

outcome after back-position:-10px-10

Answer 1

有些奇特的东西在这里，可能会尝试

    <p:commandButton icon="btnCreate" title="Icon Only"
        styleClass="btnCreate" style="width:26px; height:26px" />

CSS：

.btnCreate {border-radius：0px;背景： URL（资源/图像/ create.png）;不重复！重要; background-position：0 0！important;边框：0px; }

现在适合我3.5以下

Answer 2

只需使用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; }

为CSS中的 iconOnlyButton 类添加border，background-color等按钮的样式。在 btnCreate 中，仅保留图片的属性。您可以在Chrome或Firefox等任何现代浏览器中随时调整background-position

Primefaces命令按钮中的自定义图标

2 个答案: