層疊上下文z-index只是解決兩個(gè)元素覆蓋，誰離用戶更近的問題。而CSS混合模式，則是處理兩個(gè)元素覆蓋部分如何混合的問題。如果了解photoshop的話，對(duì)這種現(xiàn)象應(yīng)該不陌生。CSS3有兩個(gè)與混合模式相關(guān)的屬性：mix-blend-mode和background-blend-mode，本文將詳細(xì)介紹CSS混合模式

為萬秀等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及萬秀網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、萬秀網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

元素混合

元素混合mix-blend-mode應(yīng)用于兩個(gè)元素之間的混合

mix-blend-mode

初始值: normal

應(yīng)用于: 所有元素

繼承性: 無

值: normal(正常) | multiply(正片疊底) | screen(濾色) | overlay(疊加) | darken(變暗) | lighten(變亮) | color-dodge(顏色減淡) | color-burn(顏色加深) | hard-light(強(qiáng)光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(飽和度) | color(顏色) | luminosity
(亮度) | initial(初始) | inherit(繼承) | unset(復(fù)原)

兼容性: IE瀏覽器、android4.4-不支持，safari和IOS需要添加-webkit-前綴

[注意]該元素會(huì)創(chuàng)建層疊上下文，z-index屬性有效

背景混合

背景混合background-blend-mode應(yīng)用于一個(gè)元素的多背景圖或背景圖與背景顏色之間的混合

background-blend-mode

初始值: normal

應(yīng)用于: 所有元素

繼承性: 無

值: normal(正常) | multiply(正片疊底) | screen(濾色) | overlay(疊加) | darken(變暗) | lighten(變亮) | color-dodge(顏色減淡) | color-burn(顏色加深) | hard-light(強(qiáng)光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(飽和度) | color(顏色) | luminosity
(亮度) | initial(初始) | inherit(繼承) | unset(復(fù)原)

兼容性: IE瀏覽器、android4.4-不支持，safari和IOS需要添加-webkit-前綴

隔離

隔離isolation的作用是創(chuàng)建一個(gè)堆疊上下文stacking context，主要用于與mix-blend-mode屬性一起使用時(shí)，將混合模式只應(yīng)用于某一個(gè)元素或某一組元素

isolation

初始值: auto

應(yīng)用于: 所有元素

繼承性: 無

值: auto | isolate(創(chuàng)建新的堆疊上下文) | initial | inherit | unset