Content
[TOC]

关于了一个我知道,但是从来没有用过的css3属性mix-blend-mode。做了一个小demo,再一次被css3 的强大所征服。

经常做图片处理的人,比如用photoshop处理图片,对混合模式一定不会陌生。在css3中,属性mix-blend-mode其实就是ps中的混合模式(比如图层的混合模式)。

混合模式Demo效果截图

  • OVERLAY

image_1

  • SOFT-LIGHT

image_2

  • HUE

image_3

在线演示Demo

codepen预览

这个demo很简单,一看应该就明白。透过不同的滤镜蒙版来显示渲染下面的背景图。这里的我随便找了一张色彩比较丰富的图片。某些混合模式下面还意外的得到了更加酷炫的效果。

(图片来源于unsplash

参考

说在最后

  • 这里容易忽略的一点是,mask_div里面的文字也对下面的背景进行了混合,所以有的效果下,文字几乎看不见。
  • background-blend-mode 和这里提到的mix-blend-mode极其的相似,不过前者是作用于背景,而后者作用于重叠的元素之间。
  • 这里不得不提到的另一个属性isolation,这个属性并我好像还没有怎么完全弄清楚如何去理解和使用。但是很多情况下是要搭配上面两个属性使用的。