CSS|CSS Blend Mode CSSBlendMode

推荐观看视频：Una Kravets: CSS Blend Modes

Notes/Caveats
【CSS|CSS Blend Mode】先在caniuse上看一下兼容情况：

文章图片
搜索blend后的结果

文章图片
background blend
tips:

No Interpolation (x)
Combine With Filters (√)

What are Blend Modes

To combine or mix pixels with each other through a series of algorithms and those also vary based on the blend mode. There are a lot of different blend modes out there specifically in CSS. We have a few different blend mode groups.

Darken group All darken based on the active layer on top of the background layer

Darken (Based on RGB value and get the darker color of the color channels)
Multiply (Acts as a projector: A * B)
Color Burn

Lighten Group

Lighten (Based on RGB value and get the lighter color of the color channels)
Screen (Exact opposite of Multipy: 1 - (1 - A) * (1 - B) )
Color Dodge

Contrast Group

Overlay
Soft Light
Hard Light

Inversion Group

Difference ( |A - B| )
Exclusion

Component Group

Hue
Saturation
Color (Actually combines multiple blend modes. It combines the hue and the saturation and just mixes the luminosity behind it.)
Luminosity

How Blend Modes Work
The Utility of Blend Modes
1. Simplicity 2. Uniformity You can recreate any type of effect just by using CSS
3. Consistency 4. Performance You can get a 17 to 23 percent image savings by doing the transformation (with white and black).
You can remove the contrast of a image on your own by PS, and then reapply it in a browser with contrast(2) with CSS filters and blend modes.
5. Creativity Stop getting inspiration for websites from other websites.
Just because it's the norm, doesn't mean its the best solution.
6. Empathy