按钮背景为图片,在按钮不可用时,将按钮置灰
程序员文章站
2022-04-25 07:59:35
...
这个需求有两种解决方法,一种是通过滤镜来实现,还有一种简单除暴,直接在按钮不可用时,将按钮背景图片换成灰色的背景
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%;
}
然后在按钮上根据状态值动态设置样式