王鹏飞

Blog

Tutorial

About

CSS📚开源

混合模式

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

混合模式,我在这之前从来没用过。开发一般的网页真的很少会用到混合模式,因为稍微复杂的图片或者页面,都是通过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介于multiplyscreen之间,它组合了multiplyscreen效果,暗色变暗,亮色变亮,介于暗亮之间的颜色,例如50%的灰色将不会受影响。

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

darken

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

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

lighten

lightendarken类似,不过比较时,分别取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-lightoverlay的柔和版本,效果差不多,但是亮与暗的反差减小。

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

difference

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

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

exclusion

exclusiondifference非常像。但是当两个像素相同时,它会生成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

Luminositycolor相反,将原色的亮度值与背景色的饱和度和色度混合。

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

四.isolation

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

(完)

022 filter属性

留言(0


发表评论

邮箱地址不会被公开。*表示必填项