按钮背景为图片，在按钮不可用时，将按钮置灰

这个需求有两种解决方法，一种是通过滤镜来实现，还有一种简单除暴，直接在按钮不可用时，将按钮背景图片换成灰色的背景

1.按钮添加灰色滤镜

.btn-disabled {
   filter: grayscale(100%); 
   -webkit-filter: grayscale(100%); 
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    opcacity:0.5;
}

但是这种方式在IE11及以下版本的浏览器内不会生效，因为我做的是移动端项目，因此不会有这个问题

2.背景图片采用灰色背景

/*正常时背景样式*/
.debit-btn {
 background: url("../../assets/images/debit_btn.png") no-repeat;
 background-position: center center;
 background-size: 100% 100%;
}


/*不可用时背景样式*/
.debit-btn-disabled {
 background: url("../../assets/images/debit_btn_disabled.png") no-repeat;
 background-position: center center;
 background-size: 100% 100%;
}

然后在按钮上根据状态值动态设置样式