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

Question

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

我已将 2 个 png 文件放在名为 'images'、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。

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

Tizen wearable web app popup button image not showing

javascript

css

tizen

tizen-web-app

tizen-wearable-sdk