CSS Blend Mode

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

Notes/Caveats

先在caniuse上看一下兼容情况：

搜索blend后的结果

background blend

tips:

1. No Interpolation (x)
2. 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