CSS 屬性篇(十)：filter、mix-blend-mode、background-blend-mode區別

轉載至：ofxblog.cn/2019/02/04/…

1、屬性介紹

1.一、filter

應用場景：filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡一般用於調整圖像，背景和邊框的渲染。
做用對象：做用於使用該屬性的元素自己
具體應用實例：DEMO

1.二、mix-blend-mode

應用場景：mix-blend-mode CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。
做用對象：做用於使用該屬性的元素自己以及直系父元素
具體應用實例：DEMO

1.三、background-blend-mode

應用場景：background-blend-mode CSS屬性定義該元素的背景圖片，以及背景色如何混合。一般結合background-image屬性使用。
做用對象：做用於使用該屬性的元素的背景
具體應用實例：DEMO

2、屬性區別

2.一、三者的相同點

• 都屬於Blend混合效果的「濾鏡」(這裏所講的濾鏡不單單指filter屬性)
• 都用經過某種形式，改變元素的顯示效果
• 均可以混合使用，多個屬性同時疊加做用於同一個元素
• 其中mix-blend-mode和background-blend-mode更是很是的類似，就連繫統可見值幾乎都是同樣的。

2.二、三者的不一樣點

• 做用的對象不一樣（參見上文）
• filter和mix-blend-mode | background-blend-mode的系統可見值不一樣
  filter有：blur | brightness | contrast | drop-shadow | grayscale | hue-rotate | invert | opacity | saturate | sepia
  mix-blend-mode | background-blend-mode有：normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

3、說明

• filter：
  能夠類比爲你帶着各類各樣「有色眼鏡」，在這種狀況下再去觀看被添加filter屬性的元素。
• mix-blend-mode：
  能夠理解爲，在一個像素上同時顯示來自兩個元素的像素，那麼該怎麼顯示呢？顯示什麼顏色呢？這就要取決於你的混合模式了。 而這兩個元素則分別是被設置了mix-blend-mode屬性的元素 以及 其直系父元素。
• background-blend-mode：
  能夠理解爲，其餘地方和mix-blend-mode相似，可是混合的對象不是來自不一樣的元素，而是來自同一個元素的不一樣背景層。設置該屬性，不會影響元素背景之上的元素。

4、參考

混合模式
MDN filter
MDN mix-blend-mode
MDN background-blend-mode