“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第4篇文章，点击查看活动详情”

一、前言

卑微前端页面仔，是个人都能指指点点。

这天ui给了个视频，让我嵌到网页里了，并要求我把视频里的黑底滤掉，变成半透明的可以，能透出背景色。

表面笑嘻嘻，心里mmp，问候归问候，还是得努力一把，才有说辞应对ui的额外要求。

二、过程

1、 filter属性

一开始想到了filter属性，心想加个滤镜也许能行？

filter函数有：
grayscale、 调整元素灰度值
blur、 调整元素模糊度
sepia、 调整元素的褐色程度
saturate、 调整元素的饱和度
opacity、 调整元素的透明度
brightness、 调整元素的明亮度
contrast、 调整元素的对比度
hue-rotate、 色相旋转
invert。 颜色反转

大部分函数的参数范围为0-1数字之间，
其中blur函数参数为任意数字后接px单位，hue-rotate函数参数为一个整数后接deg单位。

试了一下，除了发现hue-rotate色相旋转能直接改色之外（会把所有的颜色都改了，而且没有半透明效果），发现并不能实现效果。

2、mix-blend-mode属性 (描述了元素的内容需要与父元素的背景颜色进行混合)

正打算放弃的时候，组长突然提了这个mix-blend-mode属性，说上次他用这个

mix-blend-mode: screen;

滤掉了图片的黑底，虽然我这是视频，不过这种css属性针对的应该是元素，所以图片能起效，视频也可以，于是乎我就高兴的试了下，结果发现不行。

不过最后经过一系列尝试发现，需要往上套娃，才能实现效果（具体套到哪里看各自项目）。

3、demo和效果

由于视频是公司项目的，不便透露，本文就用带黑底的图片来代替，效果是一样的，亲测有效。我写了个demo给大家看看效果。

这张图是正常的显示，结构也比较简单

然后在图片的那个元素加上mix-blend-mode：screen

就能和父元素融为一体，黑色被过滤，替换成和父元素相近的颜色，类似半透明的效果，效果如下

对结构比较简单html文件仅需要上述即可，对于带框架的那种复杂结构，如果不起效，那就一直往父元素上加mix-blend-mode：screen，层层套娃上去。（一开始在项目里不起效，我还怀疑了一下这个属性，是我的错- -，最后就是层层套娃上去，突然就发现可以了）

4、mix-blend-mode各属性值

元素如何与直系父元素进行颜色混合

mix-blend-mode: normal;  正常
mix-blend-mode: multiply; 正片叠底
mix-blend-mode: screen; 滤色
mix-blend-mode: overlay; 叠加
mix-blend-mode: darken; 变暗
mix-blend-mode: lighten;变亮
mix-blend-mode: color-dodge; 颜色减淡
mix-blend-mode: color-burn; 颜色加深
mix-blend-mode: hard-light; 强光 
mix-blend-mode: soft-light; 柔光
mix-blend-mode: difference; 差值
mix-blend-mode: exclusion; 排除
mix-blend-mode: hue; 色相
mix-blend-mode: saturation; 饱和度
mix-blend-mode: color; 颜色
mix-blend-mode: luminosity; 亮度
mix-blend-mode: initial; 初始
mix-blend-mode: inherit; 继承
mix-blend-mode: unset; 复原

有兴趣的小伙伴可以试试其他属性值

ps: 我是地霊殿__三無，好了我去交差了