在 Oracle Apex 5 中创建图像按钮

Question

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

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

但是显示是这样的

更新

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

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

我该如何解决这个问题？

Answer 1

您正在尝试在用于指定 CSS class 的字段中定义图像的路径。创建一个 CSS class 来定义您的图像并使用它，或者直接在 'Button Attributes' 字段中引用图像。

例如...

.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

Answer 2

APEX 5.0 通用主题的按钮模板只有 CSS 个图标。如果您只需要少量按钮的图像按钮，请使用 "Text" 按钮模板并输入

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

进入按钮的 "Label" 属性。如果您想拥有自己的图像按钮模板，请转到共享组件 -> 模板并复制现有的 "Icon and Text" 按钮模板并将其命名为 "Image and Text" 并使用以下 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>

使用按钮的 "Icon CSS Classes" 属性指定图像。

希望对您有所帮助帕特里克

在 Oracle Apex 5 中创建图像按钮

Create Image Button in Oracle Apex 5

css

oracle11g

oracle-apex

oracle-apex-5