按钮的背景图像不在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元素，请查看此 article 。