欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 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%;
}

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

相关标签: CSS css3