大家好

今天要作的是把2張圖像用混合模式作效果
資料來源 w3schools

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

https://www.w3schools.com/cssref/pr_background-blend-mode.asp

2張要混合的原圖

background-blend-mode: normal;

normal 為一般模式
看到的就是第一張圖像

background-blend-mode: multiply;

multiply 相乘模式
把二張圖像顏色相加
和下面的屏幕模式不一樣
相乘模式 會愈疊愈暗色

background-blend-mode: screen;

screen 屏幕模式
這是色光相加 顏色會愈加愈亮、淡色
另外用圖像加漸層看效果

background-image: url('01.jpg'), linear-gradient(to top, #0250c5 0%, #d43f8d 100%);

這比較看的出
會比變亮模式的顏色更亮

background-blend-mode: overlay;

overlay 覆蓋模式
2張圖的顏色除了相加、第一張圖像顏色會比較淡色

background-blend-mode: darken;

darken 變暗模式
和 相乘模式 很相像
但變暗模式並不會比相乘模式後更暗色
會是以第一張顏色為主的樣子

background-blend-mode: lighten;

lighten 變亮模式

類似 screen 屏幕模式

background-blend-mode: color-dodge;

color-dodge 顏色減淡模式
不管是圖像還是圖像加漸層
這模式接近 屏幕模式 後的淡化效果

background-blend-mode: saturation;

saturation 飽和模式
這模式類似再下一個的色相模式
不同的是顏色以第二張的顏色飽和度為主

background-blend-mode: color;

color 色相模式
這模式類似負片效果
以第一張圖作色相
用漸層的方式比就明顯
下圖的漸層是用 由下至上

background-blend-mode: luminosity;

luminosity 明度模式
這模式會把第一張的顏色變灰階
再和第二張的顏色相加
上圖是因為第2張圖的顏色接近灰色
變成灰褐色
所以改成圖像加漸層
就是下圖的樣子
保留第一張圖像的灰階加上漸層

--- 明日待續。