javascript - Tizen 可穿戴网络应用程序弹出按钮图像未显示

Question

我正在设计一个带有一些弹出按钮的网络应用程序，功能运行良好，但按钮显示为空。

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

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

https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/creating-popup-buttons

<div class="ui-page ui-page-active" id="main">
    <div class="ui-content">
        <a href="#sideBtnPopup" class="ui-btn" data-rel="popup" id='testPopup'>Test popup</a>
        <li><p id="okOutput"></p></li>
        <li><p id="cancelOutput"></p></li>
    </div>
    <style>
        .btn-icon-cancel::before {-webkit-mask-image: url(./images/cancel.png)}
        .btn-icon-ok::before {-webkit-mask-image: url(./images/ok.png)}
    </style>
    <div id="sideBtnPopup" class="ui-popup">
        <div class="ui-popup-content">
          Press as passing boat or pin
        </div>
        <div class="ui-popup-footer ui-grid-col-2 ui-side-button">
            <button class="ui-btn btn-icon-cancel btn-cancel" id="sideBtn-1" onclick="cancelButton()">Cancel</button>
            <button class="ui-btn btn-icon-ok" id="sideBtn-2" onclick="okButton()">OK</button>
        </div>
    </div>
    <script>
    function okButton() {
        document.getElementById("okOutput").innerHTML = "Ok Pressed";
        tau.closePopup();
    }

    function cancelButton() {
        document.getElementById("cancelOutput").innerHTML = "Cancel Pressed";
        tau.closePopup();
    }
    </script>
</div>

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

需要说明的是，按钮可以正常工作，但图像不会显示在按钮中，它们只是黑色背景的蓝色椭圆。

如有任何帮助，我们将不胜感激。

Answer 1

如果你想使用 -webkit-mask-image你需要设置 background-color和 -webkit-mask-size

只需更新您的 <style>标记如下:

<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>

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