共计 2196 个字符，预计需要花费 6 分钟才能阅读完成。
看到封面这张图，是不是如同艺术品个别，第一次看到这张图时，是比拟震惊的，急不可待的钻研其源码是如何实现的，最初更为惊奇的是只须要纯 CSS 即可实现，接下来就开展阐明实现过程。
前置知识点
实现此成果须要理解 2 个前置的 CSS 知识点，滤镜 filter 属性中的 contrast 和mix-blend-mode属性。
filter: contrast
filter属性置信都有所触过，比方常见的 blur() 函数用于高斯含糊图片。除此之外还有很多其余函数可用，如下表所示：
| Filter | 形容 |
|---|---|
| blur(px) | 给图像设置高斯含糊 |
| brightness(%) | 将线性乘法器利用于输出图像，使其看起来或多或少地变得亮堂 |
| contrast(%) | 调整图像的对比度 |
| drop-shadow() | 给图像设置一个暗影成果 |
| grayscale(%) | 将图像转换为灰度图像 |
| hue-rotate(deg) | 给图像利用色相旋转 |
| invert(%) | 反转输出图像 |
| opacity(%) | 转化图像的通明水平 |
| saturate(%) | 转换图像饱和度 |
| sepia(%) | 将图像转换为深褐色 |
| url() | 获取指向 SVG 滤镜的 URI，该 SVG filter 能够嵌入到内部 XML 文件中 |
明天次要用到的是 contrast，用于调整图像的对比度。如下图所示，右侧图片是减少了filter: contrast(50%) 的成果。
浏览器兼容状况如下所示：
mix-blend-mode
mix-blend-mode该 CSS 属性作用是让元素内容和这个元素的背景以及上面的元素产生“混合”。设置不同 mix-blend-mode 值的成果如下所示：
具体含意解释如下：
multiply混合后通常色彩会加深，多用在红色背景图片和其余元素的混合，以及黑白纹理的合并上。- screen 混合后色彩会减淡，非常适合实现霓虹灯光成果，适宜彩色背景素材和其余元素混合，十分实用。
- overlay 在色彩值暗的时候，采纳了相似“正片叠底”的算法，而色彩亮的时候，采纳了相似“滤色”的算法。此混合模式比拟适宜实现文字水印成果。
darken示意哪个色彩暗应用哪个色彩，在 web 开发中，给图形或文字着色会很实用。lighten是哪个色彩浅就体现为哪个色彩，在 web 开发中，给图形或文字着色会很实用。color-dodge色彩减淡混合模式能够用来爱护底图的高光，适宜解决高光下的人物照片。color-burn色彩加深混合模式能够用来爱护底图的暗影，适宜解决幽深秘境一类的照片，通过和特定的色调进行混合，能够营造更加幽深的意境。hard-light的成果是强光，最终的混合成果就如同夺目的聚光灯照耀过去，体现为图像亮的中央更亮，暗的中央更暗。多用在图像体现解决上。soft-light的成果是柔光，最终的混合成果就如同发散的光源洋溢过去，体现成果和 hard-light 有类似之处，只是体现没有那么强烈。给图像着色的时候罕用此混合模式。difference是差值成果，能够实现色彩的反色成果。exclusion的成果是排除，最终的混合成果和difference模式是相似的，区别在于exclusion的对比度要更低一些。
接下来要介绍的 4 种混合模式都属于色彩系混合模式，在 web 开发中不罕用，还是传统的图像体现解决畛域用的较多。
hue示意色调混合，最终的成果是混合后的色彩应用底层元素的亮度和饱和度，而应用下层元素的色调。saturation示意饱和度混合，混合后的色彩保留底图的亮度和色调，应用顶图的饱和度。color示意颜色混合，混合后的色彩保留底图的亮度，应用顶图的色调和饱和度。luminosity示意亮度混合，混合后的色彩保留底图的色调和饱和度，应用顶图的亮度，和 color 模式正好是相同的。
浏览器兼容状况如下所示：
代码开发
今日主图的成果次要就是用到了滤镜 filter 属性中的 contrast 和mix-blend-mode属性中的multiply。
为了达到成果的同时也能浏览文字，所以设置图片的比照图 filter: contrast(60%)。再将整个文本设置相对定位置于图片上方，并设置mix-blend-mode: multiply 即可达到图片所示的成果。外围代码如下所示：
<div>
<img src="https://xxx.jpeg">
<p>
***
文本内容
***
</p>
</div>CSS 代码：
div {
position: relative;
overflow: hidden;
}
img {
width: 100%;
filter: contrast(60%);
}
p {
line-height: 1;
font-size: 1.76vw;
color: #fff;
background: #000;
mix-blend-mode: multiply;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}通过解决后的下图你能不看源码猜到是哪位明星吗？
最初
今日只用到了 filter 和 mix-blend-mode 的一个属性，还很很多的性能等着你去发现，有趣味的同学能够尝试用起来吧，CSS 的世界等着你来挖掘～ 看完如果感觉有用，记得点个赞再走，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）
参考
- mix-blend-mode
- filter
- CSS3 混合模式 mix-blend-mode 简介
