前面的话

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

<style>

body{background-color: gray;}

.test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;}

.test2{isolation: isolate;}

.in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;}

</style>

</head>

<body>

<div class="test1">

    <div class="in"></div>

</div>

<div class="test2">

    <div class="in"></div>

</div>

  如果不使用isolation: isolate创建堆叠上下文，由于.test1和.test2背景颜色透明，则.in会和<body>背景颜色混合，成为粉色。使用isolation: isolate后，.test2从<body>中隔离出来，不与<body>的背景进行混合，从而保留其原先的红色

  [注意]由于isolation: isolate的作用就是创建堆叠上下文，所以只要能创建堆叠上下文，就可以实现隔离的效果，所以，类似地，relative、filter等样式也可以实现类似效果

CSS混合模式的更多相关文章

  1. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

  2. 《转》15种CSS混合模式让图片产生令人惊艳的效果

    浏览器支持 按照现在情况来讲, 浏览器支持 CSSbackground-blend-mode属性还在不断的完善中.早期版本的浏览器目前还不支持,但caniuse.com报告说在Chrome,Firef ...

  3. [CSS 混合模式]——mix-blend-mode/background-blend-mode简介

    mix-blend-mode/background-blend-mode CSS3真是有很多的神奇的地方,这个两个元素你知道吗? 这是张大大拿过来的图,关于混合模式,借图一用. mix-blend-m ...

  4. css mix-blend-mode 混合模式

    CSS3混合模式种类 在CSS3混合模式中,目前仅有16种:normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,h ...

  5. css mix-blend-mode 颜色滤镜混合模式

    CSS3混合模式种类 在CSS3混合模式中,目前仅有16种:normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,h ...

  6. [转] CSS3混合模式mix-blend-mode/background-blend-mode简介 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模 ...

  7. 谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 你很熟悉CSS，却没掌握这些CSS技巧

    转载来自 http://www.html5cn.org/article-9294-1.html 做前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,因此CSS在开 ...

  9. css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation

    css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图 ...

随机推荐

  1. js 日期天数相加减，格式化yyyy-MM-dd

    参数格式: date :2016-03-02 days:-3(2)当为负数的时候日期往前推,为正数,日期往后推 function addDate(date, days) { var d = new D ...

  2. Tomcat学习笔记 - 错误日志 - NetBeans配置tomcat出错情况总结 -- 部署错误: 启动 Tomcat 失败。-- '127.0.0.1' 不是内部或外部命令，也不是可运行的程序

    真的管用,不知道为啥管用.转载自:http://blog.sina.com.cn/s/blog_709548200102vgy4.html 问题描述: 新安装的NetBeans8.0.2,安装过程中还 ...

  3. Python中for\while的用法

    代码示例 board = [] for i in range(5): board.append(i) print board board = [] i = 0 while i < 5: boar ...

  4. POJ 1190 生日蛋糕（DFS）

    生日蛋糕 Time Limit: 1000MSMemory Limit: 10000KB64bit IO Format: %I64d & %I64u Submit Status Descrip ...

  5. android继续学习相关

    最近不是很忙,但是慢慢就忘记了学习. 我总是选中了一条路后,怀疑它的正确性.我也知道这不好. 一年前,我买了一个ipad,然后玩app上的游戏,觉得很好玩,而且上面很多都是收费的, 当时就觉得,为什么 ...

  6. ***.M51文件详细注释

    ;说明:这是1950编译后生成的Keil_1910.M51文件,以此为例来讲解M51文件 // :: PAGE BL51 BANKED LINKER/LOCATER V6., INVOKED BY: ...

  7. cf475B Strongly Connected City

    B. Strongly Connected City time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  8. 解决ssh无密码登录不成功的问题

    把ssh设置为无密码登录很简单,只需两步: 1.在本地创建公钥和私钥: ssh-keygen -t rsa 2.然后把公钥上传到远程机器上: ssh-copy-id -i ~/.ssh/id_rsa. ...

  9. java提高篇（二二）-----LinkedList

    摘自http://blog.csdn.net/chenssy/article/details/18099417  java提高篇(二二)-----LinkedList 一.概述 LinkedList与 ...

  10. UVa 1394: And Then There Was One

    设置一个数组Winner记录经典约瑟夫问题中的剩余者即可递归解决该问题. 注: 约瑟夫问题:有编号为0~n-1的n个人,从0号开始报数1,2,3......报到k的杀死,然后从下一个人开始继续报数1, ...