CSS混合模式

層疊上下文z-index只是解決兩個元素覆蓋，誰離使用者更近的問題。而css混合模式，則是處理兩個元素覆蓋部分如何混合的問題。如果了解photoshop的話，對這種現象應該不陌生。css3有兩個與混合模式相關的屬性：mix-blend-mode和background-blend-mode，本文將詳細介紹css混合模式

元素混合mix-blend-mode應用於兩個元素之間的混合

mix-blend-mode

初始值: normal

應用於: 所有元素

繼承性: 無

值: normal(正常) | multiply(正片疊底) | screen(濾色) | overlay(疊加) | darken(變暗) | lighten(變亮) | color-dodge(顏色減淡) | color-burn(顏色加深) | hard-light(強光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(飽和度) | color(顏色) | luminosity

(亮度) | initial(初始) | inherit(繼承) | unset(復原)

相容性: ie瀏覽器、android4.4-不支援，safari和ios需要新增-webkit-字首

[注意]該元素會建立層疊上下文，z-index屬性有效

背景混合background-blend-mode應用於乙個元素的多背景圖或背景圖與背景顏色之間的混合

background-blend-mode

初始值: normal

應用於: 所有元素

繼承性: 無

值: normal(正常) | multiply(正片疊底) | screen(濾色) | overlay(疊加) | darken(變暗) | lighten(變亮) | color-dodge(顏色減淡) | color-burn(顏色加深) | hard-light(強光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(飽和度) | color(顏色) | luminosity

(亮度) | initial(初始) | inherit(繼承) | unset(復原)

相容性: ie瀏覽器、android4.4-不支援，safari和ios需要新增-webkit-字首

隔離isolation的作用是建立乙個堆疊上下文stacking context，主要用於與mix-blend-mode屬性一起使用時，將混合模式只應用於某乙個元素或某一組元素

isolation

初始值: auto

應用於: 所有元素

繼承性: 無

值: auto | isolate(建立新的堆疊上下文) | initial | inherit | unset

[注意]由於isolation: isolate的作用就是建立堆疊上下文，所以只要能建立堆疊上下文，就可以實現隔離的效果，所以，類似地，relative、filter等樣式也可以實現類似效果

CSS混合模式

層疊上下文z index只是解決兩個元素覆蓋，誰離使用者更近的問題。而css混合模式，則是處理兩個元素覆蓋部分如何混合的問題。如果了解photoshop的話，對這種現象應該不陌生。css3有兩個與混合模式相關的屬性 mix blend mode和background blend mode，本文將詳細...

CSS顏色混合模式

photoshop裡最沒有用處的一種功能 但也有人說是使其超出競爭對手的一種功能 就是混合模式 blend mode 混合模式是指兩個畫素點疊落到一起，用不同的方法混合它們的顏色。比如，darken顏色混合模式，就是選擇兩個畫素中顏色更深的乙個輸出。當將混合模式運用到整張上時，會產生讓人驚訝的效果。...

CSS3 混合模式

css3混合模式 css blend modes 是css3新增的乙個魔法特性，可以允許多個背景或多個元素進行混合，類似於photoshop的圖層混合模式 設定多背景之間的混合模式，背景色 背景影象 漸變背景之間的混合模式。可以接受16個取值，分別為 normal multiply screen o...