css - 在 Oracle Apex 5 中创建图像按钮

Question

如何在 Oracle Apex 5 中创建图像按钮？我在我的应用程序中使用通用主题。

我已将按钮属性设置如下。

但它是这样显示的。

更新

style="background-image:url(#APP_IMAGES#holidays.png);background-repeat:no-repeat;"在按钮属性字段中使用后，图像显示如下。

它不是显示完整图像，而是显示裁剪图像。

我该如何解决这个问题？

Answer 1

APEX 5.0 中通用主题的按钮模板仅为 CSS 图标。如果您只需要少量按钮的图像按钮，请使用“文本”按钮模板并输入

<img src="#APP_IMAGES#holidays.png">

进入按钮的“标签”属性。如果您想拥有自己的图像按钮模板，请转到共享组件 -> 模板并复制现有的“图标和文本”按钮模板并将其命名为“图像和文本”并使用以下 HTML 标记

<button class="t-Button t-Button--icon #BUTTON_CSS_CLASSES#" #BUTTON_ATTRIBUTES# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#"><img src="#ICON_CSS_CLASSES#"><span class="t-Button-label">#LABEL#</span></button>

使用按钮的“图标 CSS 类”属性来指定图像。

希望能帮助帕特里克

Answer 2

您正在尝试在用于指定 CSS 类的字段中定义图像的路径。创建定义图像的 CSS 类并使用它，或者直接在“按钮属性”字段中引用图像。

例如..

.holidayButton {
  background-image:url(#APP_IMAGES#holidays.png);
  background-repeat:no-repeat;
}

或者

style="background-image:url(#APP_IMAGES#holidays.png);background-repeat:no-repeat;"

您可能想阅读 CSS 并在运行应用程序时尝试使用开发人员工具中的一些属性以进行微调。MDN 站点是一个极好的资源。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image