CSS｜图像、页面变灰

uniapp项目里面中要做按钮 ，下载了几个按钮图标之后，想弄成灰色禁用效果，作为手越高、人越懒信念的坚定支持者，肯定不会再去下载灰色图标了，直接CSS搜起，发现了方便的办法。

实例

随便找点儿图片：

使用此句可以全部变灰。

filter: grayscale(1)

如果是grayscal(0.5)?

只有一点儿颜色，半灰是也，如同加了个滤镜。

filter：n. 过滤器；滤光器，滤声器，滤波器；过滤程序，过滤软件；（指示车辆转弯的）分流指示灯 v. 过滤；渗入，透过；（消息、信息等）慢慢传开，走漏；缓慢进入，陆续步入；（车辆）看到分流指示灯的信号后转弯；（用程序）筛选。

uniapp项目中的运用

放在自己项目里面，直接使用动态class搞定。

<view class="control-btns">
    <image :src="backIcon" @click="backClick()" :class="{disabled: backDisabled}"></image>
    <view class="" @click="audioPlayPause()">
        <image :src="pauseIcon" v-if="play"></image>
        <image :src="playIcon" v-else></image>
    </view>
    <image :src="forwardIcon" @click="forwardClick()" :class="{disabled: forwardDisabled}"></image>
</view>
            ...
.disabled {
    filter: grayscale(1);
}