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 Safari 7~9.1   支持的值很多:   mix-blend-mode:normal;    //正常   mix-blend-mode:multiply;   //正片叠加   mix-blend-mode:screen;   //滤色   mix-blend-mode:overlay;   //叠加   mix-blend-mode:darken;   //变暗   mix-blend-mode:lighten;   //变亮   mix-blend-mode:color-dodge;   //颜色减淡   mix-blend-mode:color-burn;   //颜色加深   mix-blend-mode:hard-light;   //强光   mix-blend-mode:soft-light;   //柔光   mix-blend-mode:difference;   //差值   mix-blend-mode:exclusion;   //排除   mix-blend-mode:hue;     //色相    mix-blend-mode:color;     //颜色   mix-blend-mode:luminosity; //亮度   mix-blend-mode:initial;   //初始   mix-blend-mode:inherit;   //继承   mix-blend-mode:unset;   //复原

css3 background-blend-mode 背景混合模式 可以是背景图片见的混合模式,也可以是背景图片和背景色的混合。   兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1   CSS3 backgrounds多背景IE9+浏览器就开始支持了,因此,你想混合多图,就是要逗号,一个一个写在background属性中就可以了,   .box {     background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center;   }

css3 isolation:isolate 隔离   值除了万年不变的inherit外还包括auto和isolate   isolation:isolate 的原理:本质上是因为 isolation:isolate 创建一个新的层叠上下文。   只要有元素可以创建层叠上下文,就可以阻断mix-blend-mode     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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2656
来自专栏从零开始学 Web 前端

CSS学习笔记(基础篇)

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

1513
来自专栏项勇

笔记74 | 学习掌握ConstraintLayout的基本属性

2245
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

4591
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

7729
来自专栏Android干货

浅谈GridLayout(网格布局)

4059
来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

7408
来自专栏cnblogs

CSS3新特性应用之用户体验

一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:non...

2158
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2856
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

3086

扫码关注云+社区

领取腾讯云代金券