专栏首页柠檬先生mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离

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 条评论
登录 后参与评论

相关文章

  • JavaScript 变量,语句

    let 块级作用域,不允许重复声明,不存在变量提升,值在当前作用域内生效,在使用未定义的变量会报错。

    用户1197315
  • Java 流程控制

    Java 主要的流程控制语句有3钟,选择语句,循环语句,跳转语句。 Java 中的作用域,是一对用花括号括起来的,块定义了变量使用的范围,   各个块之间可以嵌...

    用户1197315
  • JavaScript 基础(三) 对象 条件判断

    JavaScript的对象是一种无序的集合数据类型,它是由若干键对组成。     var guagua = {         name:'瓜瓜', ...

    用户1197315
  • 【转】动效案例:纯手工写一个滚动视差效果

    大家好,今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师,不擅长PS、AE,但是我们完全可以通过前端技术设计一幅漂亮的画面,今天我们要设计一幅月下山...

    夏末浅笑
  • 动效案例:纯手工写一个滚动视差效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为网页设计的热点趋势,越来越多的网...

    前端达人
  • FPGA和外围接口-第一章 爱上FPGA(1.3.3 1.3.4))

    1.3.3 Intel FPGA 主流芯片命名规则 1.3.4 Xilinx FPGA 命名规则

    碎碎思
  • python基础学习3_if_for

    if用于条件判断,如果满足条件就执行否则就继续直到结束,熟悉shell条件判断就觉得so easy

    py3study
  • 微信扫描登录

    蛋未明
  • 习题 7: 更多打印

    现在我们将做一批练习,在练习的过程中你需要键入代码,并且让它们运行起来。我不会解释太多,因为这节的内容都是以前熟悉过的。这节练习的目的是巩固你学到的东西。我们几...

    hankleo
  • 12 个UX设计师典型面试问题 · 助你通过面试

    这里有几个典型的UX设计师面试问题,如果你想成功通过你的面试,建议你仔细阅读并做好事前准备。

    宇相

扫码关注云+社区

领取腾讯云代金券