mix-blend-mode
定义:mix-blend-mode 描述了元素的 内容 应该与元素的 直系父元素 的内容和元素的背景如何混合。
值: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity。
对PS有一定熟悉的盆友应该知道PS有个混合模式,该属性与PS的混合模式基本一致。
我们可以经常看到设计师同学用一些混合模式来实现视觉效果。例如:
background-blend-mode
定义:background-blend-mode的值和 CSS属性定义该元素的 背景图片,以及 背景色 如何混合。
background-blend-mode 的值和 mix-blend-mode 一致,效果也是一致的,区别在于背景混合只需要作用在同一个元素上。元素的背景图必需要有两个值。例如:
background: linear-gradient(red, purple), url(../img/05.jpg) no-repeat;;
background-blend-mode: screen;
注:background-image的值显示的优先级为,先写的在上层,后写的在下层。