css - 按钮的背景图像在 jQuery mobile 中不起作用？

Question

我想为以下图像设置按钮的背景图像：

使用此代码：

 <style>
 .cancel-button {background-image:url(images/cancelbutton.png) !important;}
 </style>

 <a href="index.html" data-role="button" cancel="cancel-button"></a>

但我得到了按钮的输出，如下图

如何解决这个问题？

Answer 1

固定解决方案

工作示例：http: //jsfiddle.net/Gajotres/AJsTR/

CSS：

.cancel-button {
    background-image:url("http://i.stack.imgur.com/0XDDb.png") !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: 0 0 transparent !important;
    width: 197px !important;
    height: 75px !important;
}

响应式解决方案

工作示例：http: //jsfiddle.net/Gajotres/AJsTR/1/

.cancel-button {
    background-image:url("http://i.stack.imgur.com/0XDDb.png") !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: 0 0 transparent !important;
    background-size: 100% 100% !important;
}

最后说明

如果您想了解如何自己自定义 jQuery Mobile 元素，请查看这篇文章。