Question

不知何故，我无法显示自定义ui图标。在此示例中，两个图像文件（18x18和36x36 px）与html文件位于同一目录中。谁能发现这里有什么问题？谢谢。

<!DOCTYPE html>
<html>
<head>
    <title>-</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.3/theme-classic/theme-classic.css" />

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

    <style style="text/css">
        .ui-icon-dbblue {
            background-image: url("dbblue.png");
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            .ui-icon-dbblue {
                    background-image: url("dbblue_hr.png");
                    background-size: 18px 18px;
            }
        }
    </style>

</head>
<body>

    <div data-role="page" data-title="Control" id="control" data-add-back-btn="true">
        <div data-role="content">
            <a href="#" data-role="button" data-icon="dbblue" data-iconpos="notext" title="dbblue"></a>
        </div>
    </div>

</body>
</html>

Answer 1

在你的CSS中添加！important。

 <style style="text/css">
    .ui-icon-dbblue {
        background-image: url("dbblue.png") !important;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .ui-icon-dbblue {
                background-image: url("dbblue_hr.png") !important;
                background-size: 18px 18px !important;
        }
    }
</style>

jQuery Mobile自定义图标不起作用

1 个答案: