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;
}

最后的说明

看看这个 article 如果您想了解如何自己自定义 jQuery Mobile 元素。