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

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

 

使用此代码：

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

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

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



如何解决这个问题？

最佳答案

固定解决方案

工作示例：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。

关于css - 按钮的背景图片在jQuery mobile中不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19021434/