龙空技术网

CSS|图像、页面变灰

爱玩的安哥 73

前言:

目前姐妹们对“css灰色弹窗”大约比较关注,小伙伴们都需要学习一些“css灰色弹窗”的相关资讯。那么小编也在网络上搜集了一些对于“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);}

标签: #css灰色弹窗