推荐观看视频：Una Kravets: CSS Blend Modes
Notes/Caveats
先在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.
网友评论