层叠上下文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