在国家公祭日的时候我们可以看到很多应用的首页都是黑白效果。我们平常也经常使用黑白效果来表达这个组件已经失效。那么组件我们可以通过制作一个单独的黑白组件来进行替换，但是这个方法不适用与开发去表达。

需求

我有一个卡片，卡片整体是图片传过来的，但是我想通过黑白效果来表达这个卡片已经失效了。这是一个黑白效果的典型用法，但是总不能每种卡片都添加一个黑白的样式图吧，所以就用到了混合模式。

混合模式位置

在需要的元素上绘制混合层

在我举的例子中，一个正常的卡片是这样的

会员卡

背景层的图片是后端直接传到前端的（包括颜色也是属于卡片）。前端对于卡片的编辑只剩下文字。那么不同种类的失效卡片都需要黑白效果时，就需要用到混合模式了。

我这里以做黑白效果为例，其他效果可自行探索。

绘制一个覆盖卡片的纯黑矩形。

覆盖卡片

调整混合模式

选中黑色层，点击混合模式按钮，选择任意一个色彩相关的混合模式。

添加混合模式

我们就可以直接看到颜色的变化了。

黑白会员卡

组件制作

我们也可以将这个黑色层放入卡片的组件中，然后将黑色层设置为组件，这样的话我们就可以直接调整卡片一键切换是否黑白了。