Javascript Tizen可穿戴web应用弹出按钮图像未显示

我正在设计一个带有一些弹出按钮的web应用程序，功能正常，但按钮显示为空

我在名为“images”的文件夹中放置了2个png文件，分别是ok.png和cancel.png

下面是我在Tizen教程中使用的代码

.btn图标取消：：在{-webkit掩码图像：url（./images/cancel.png）之前
.btn图标ok:：在{-webkit掩码图像：url（./images/ok.png）}之前
当船或大头针经过时按压
取消
好啊
函数okButton（）{
document.getElementById（“OKTOUTPUT”）.innerHTML=“按下Ok键”；
tau.closePopup（）；
}
函数取消按钮（）{
document.getElementById（“cancelOutput”）.innerHTML=“取消按下”；
tau.closePopup（）；
}

我已经尝试将css代码移动到css文件中。我还尝试了其他一些方法来设置图像的url，我尝试了将图像大小调整到按钮大小，但没有成功

为了清楚起见，按钮工作正常，但图像不会显示在按钮中，它们只是带有黑色背景的蓝色椭圆形

---

非常感谢您的帮助。

如果您想使用

-webkit mask image

您还需要设置

背景色

和

-webkit mask size

只需将您的

标记更新为以下内容：

<style>
    .btn-icon-cancel::before {
        -webkit-mask-image: url(./images/cancel.png);
        -webkit-mask-size: 100%;
        background-color: #fff;
    }

    .btn-icon-ok::before {
        -webkit-mask-image: url(./images/ok.png);
        -webkit-mask-size: 100%;
        background-color: #fff;
    }
</style>

.btn图标取消：：之前{
-webkit掩码图像：url（./images/cancel.png）；
-webkit面罩尺寸：100%；
背景色：#fff；
}
.btn图标确定：：之前{
-webkit掩码图像：url（./images/ok.png）；
-webkit面罩尺寸：100%；
背景色：#fff；
}

---

将#fff替换为所需的图标颜色。

如果要使用

-webkit mask image

，还需要设置

背景颜色和
-webkit mask size

只需将您的
标记更新为以下内容：

<style>
    .btn-icon-cancel::before {
        -webkit-mask-image: url(./images/cancel.png);
        -webkit-mask-size: 100%;
        background-color: #fff;
    }

    .btn-icon-ok::before {
        -webkit-mask-image: url(./images/ok.png);
        -webkit-mask-size: 100%;
        background-color: #fff;
    }
</style>


.btn图标取消：：之前{
-webkit掩码图像：url（./images/cancel.png）；
-webkit面罩尺寸：100%；
背景色：#fff；
}
.btn图标确定：：之前{
-webkit掩码图像：url（./images/ok.png）；
-webkit面罩尺寸：100%；
背景色：#fff；
}

将#fff替换为所需的图标颜色。
我的朋友，你太棒了。谢谢你，帕特里克，你真是我的朋友。谢谢你，帕特里克。