23-Csstutorial专题

混合模式

混合模式可以将多个图层混合在一起，创建混合的视觉效果。

混合模式，我在这之前从来没用过。开发一般的网页真的很少会用到混合模式，因为稍微复杂的图片或者页面，都是通过UI设计图片，然后直接添加到网页上，这样开发速度会更快。

但是为了教程的完整性，还是在这里做个介绍。

Duotone，中文是双色调的意思，一种很流行的设计风格，整个图片主要由两种颜色组成：一个是亮色，一个是暗色。使用css混合可以实现这种双色调风格。

使用混合模式、fiter属性和伪元素，可以很方便将双色调风格应用于图片上。

一.混合模式（Blend Model）

设计软件，例如photoshop，会经常用到混合模式，它们使用图层功能，将多种颜色混合在一起。可以通过控制颜色混合的方式，创建非常有趣的视觉效果。

上面使用了mix-blend-mode将混合效果应用于整个元素，还可以使用background-blend-mode仅使元素的背景色混合。

如果一个元素拥有多个背景图，可以使用background-blend-mode使背景图彼此混合。

.demo {
  max-width: 400px;
  height: 400px;
  position: relative;
  background: url(https://source.unsplash.com/YJOuS1GZbDQ/600x400),
    url(https://source.unsplash.com/V7oLFRVqeHM/600x400),
    url(https://source.unsplash.com/_wWjQr1JZ1k/600X400);
  background-size: cover;
  background-blend-mode: overlay;
}

混合模式分为两类：可分离的和不可分离的。分离的混合模式将RGB单独考虑，不可分离的混合模式，统一考虑所有颜色组成。

二.可分离的混合模式

normal

normal是混合模式的默认值。不会改变元素的混合效果。

multiply

multiply混合模式就像是将多个透明图层叠加在一起。白色像素将会显示为透明色，而黑色像素将会显示为黑色。白色和黑色之间的颜色的像素将会乘以它的亮度值。这意味着亮的颜色会越亮，而暗的颜色会变暗，multiply一般会生成一个偏暗的效果。

screen

screen往往会创建与multiply相反的偏亮的效果。

.my-element {
    mix-blend-mode: screen;
}

overlay

overlay介于multiply和screen之间，它组合了multiply和screen效果，暗色变暗，亮色变亮，介于暗亮之间的颜色，例如50%的灰色将不会受影响。

.my-element {
    mix-blend-mode: overlay;
}

darken

darken在混合两种颜色的时，会分别比较两个颜色的RGB分量，取RGB值比较暗的（小值），生成新的RGB。

.my-element {
    mix-blend-mode: darken;
}

lighten

lighten与darken类似，不过比较时，分别取RGB中较量的分量，生成新的RGB。

.my-element {
  mix-blend-mode: lighten;
}

color-dodge

color-dodge会使背景色变亮，衬托前景色。

.my-element {
  mix-blend-mode: color-dodge;
}

color-burn

color-burn会增加对比度，形成更饱和的中间色，减少高光。

.my-element {
    mix-blend-mode: color-burn;
}

hard-light

hard-light会创建一个相反的效果。这个模式要么会形成multiply的效果，要么形成screen效果，当像素亮度低于50% gray时，使用multiply效果，亮度大于50% gray时，使用screen效果。

.my-element {
    mix-blend-mode: hard-light;
}

soft-light

soft-light是overlay的柔和版本，效果差不多，但是亮与暗的反差减小。

.my-element {
    mix-blend-mode: soft-light;
}

difference

difference混合两种颜色时，使用的是差值法，如果两个元素的RGB完全相同，差值为0，最后形成的颜色就是黑色。

.my-element {
    mix-blend-mode: difference;
}

exclusion

exclusion与difference非常像。但是当两个像素相同时，它会生成50%的gray，而不是黑色，这样会生成一个相对柔和的结果。

.my-element {
    mix-blend-mode: exclusion;
}

三.不可分离的混合模式

你可以认为这种混合模式与HSL颜色结构类似。

hue

hue将源色的色度值和背景色的饱和度和亮度值结合，形成新的颜色。

.my-element {
    mix-blend-mode: hue;
}

saturation

saturation将源色的饱和度值和背景色的色度值和亮度值结合，形成新的颜色。

.my-element {
    mix-blend-mode: saturation;
}

color

color将源色的饱和度和色度值与背景色的亮度混合形成新的颜色。

.my-element {
    mix-blend-mode: color;
}

Luminosity

Luminosity与color相反，将原色的亮度值与背景色的饱和度和色度混合。

.my-element {
    mix-blend-mode: luminosity;
}

四.isolation

设置isolation: isolate;可以创建一个新的栈空间，这可以防止它与背景图层混合。但是这个对background-blend-mode无效。

（完）