转自：http://www.zhangxinxu.com/wordpress/?p=5155

只要元素可以创建层叠上下文，就可以阻断mix-blend-mode！

于是，不仅仅是isolation:isolate，下面这些也是可以的：

  1. z-index值不为auto的position:relative/position:absolute定位元素。
  2. position:fixed，仅限Chrome浏览器，其他浏览器遵循上一条，需要z-index为数值。
  3. z-index值不为auto的flex项(父元素display:flex|inline-flex).
  4. 元素的opacity值不是1.
  5. 元素的transform值不是none.
  6. 元素mix-blend-mode值不是normal.
  7. 元素的filter值不是none.
  8. will-change指定的属性值为上面任意一个。
  9. 元素的-webkit-overflow-scrolling设为touch.

眼见为实，您可以狠狠地点击这里：层叠上下文与混合模式阻隔测试demo

理解CSS3 isolation: isolate的表现和作用的更多相关文章

  1. mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离

    css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG 兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 ...

  2. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  3. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  4. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  5. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  6. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  7. SLAM+语音机器人DIY系列：（二）ROS入门——8.理解roslaunch在大型项目中的作用

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...

  8. 理解CSS3属性transition

    一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...

  9. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

随机推荐

  1. vsftpd問題集

    vsftpd无法看到文件:226 Transfer done (but failed to open directory). 原因:目录不是一个 world_readable目录 解决方法:在配置文件 ...

  2. REST 和 SOAP、RPC 有何区别？

    第一个问题:什么是RESTful? REST这个词,是Roy Thomas Fielding在他2000年的博士论文中提出的.有兴趣可以看看这里论文`,谁是Fielding?点击前面名字了解. 那RE ...

  3. atitit.XML类库选型及object 对象bean 跟json转换方案

    atitit.XML类库选型及object 对象bean 跟json转换方案 1. XML类库可以分成2大类.标准的.这些类库通常接口和实现都是分开的 1 2. 常见的xml方面的方法 2 2.1.  ...

  4. Quartus调用Modelsim SE避免重复编译Altera器件库的方法

    最近用Quartus 15.0配合Modelsim SE 10.4的64位版本,简直就是闪电一般的仿真速度.但是众所周知,SE版本最大的问题就是每次由Quartus自动调用时,都要重新编译所使用的器件 ...

  5. C++11新特性实验

    #include <iostream> #include <vector> #include <map> #include <string> #incl ...

  6. 搜索引擎根据原Sphider的脚本修正后的 Sphider-plus 2.2

    搜索引擎根据原Sphider的脚本修正后的 Sphider-plus 2.2 标签: 搜索引擎脚本search数据库authorizationjavascript -- : 1412人阅读 评论() ...

  7. UIApplication深入学习

    多时候,我们不需要关心这个类,我们很少继承这个类,偶尔会调用这个类的api来实现一些功能,但是不可否认,这个类是iOS编程中很重要的一个概念.UIApplication的核心作用是提供了iOS程序运行 ...

  8. Tablespace for table '`pomelo`.`bag`' exists. Please DISCARD the tablespace before IMPORT.

    //遇到的问题是,删除数据库之后,重新创建数据库,在创建数据库表的时候,明明没有该表,却提示存在这个表.这是数据库缓存造成的 //解决方法 FLUSH TABLES; /* 安装MySql数据库(略) ...

  9. [uboot]uboot如何引导系统

    转自:http://bbs.elecfans.com/jishu_455028_1_1.html 如6410的bootcmd和bootargs默认存在于uboot1.1.6/include/confi ...

  10. PHP——内测：联系人管理

    要求见文件-内测:联系人管理.pdf 数据库为mycontacts 表格为contacts,groups 表格内容为: zhuye.php <!DOCTYPE html PUBLIC " ...