概念

CSS3混合模式（  CSS Blend Modes  ）是CSS3新增的一个魔法特性，可以允许多个背景或多个元素进行混合，类似于Photoshop的图层混合模式

CSS3混合模式属性一览

background-blend-mode

background-blend-mode ： <blend-mode>

设置多背景之间的混合模式，背景色、背景图像、渐变背景之间的混合模式。

<blend-mode>可以接受16个取值，分别为：normal | multiply | screen | overlay | darken | lighten |color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity如下图

mix-blend-mode

mix-blend-mode：<blend-mode>

  • 设置多元素之间的混合模式。
  • html元素之间、html与svg元素之间均可

isolation

isolation：auto | isolate

  • 设置元素的隔离模式

下载Demo

CSS3---混合模式的更多相关文章

  1. 神奇的CSS3混合模式

    神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...

  2. CSS3混合模式mix-blend-mode/background-blend-mode简介 ，PS中叠加效果

    一.CSS3 mix-blend-mode 首先,要知道”blend-mode”就是混合模式的意思.那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SV ...

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

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

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

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

  5. CSS3混合模式background-blend-mode

    注意:background属性中的背景图片和颜色混合,只能在一个background属性中. 属性值: background-blend-mode: normal; //正常 background-b ...

  6. css3混合模式

    https://juejin.im/entry/5b4802d15188251ac446d3a9

  7. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

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

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

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

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

  10. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

随机推荐

  1. System Center Configuration Manager 2016 配置安装篇（Part2）

    步骤4.安装SCCM当前分支(版本1802) 注意:以管理员身份在ConfigMgr服务器(CM01)上执行以下操作. 为此,在Configuration Manager服务器(CM16)上,打开W ...

  2. 花3分钟了解下C/C++中的函数可变参简单实现

    1.可变参函数的原理 C/C++函数的参数是存放在栈区的,并且参数的入栈是从参数的右边开始,即最后一个参数先入栈,而第一个参数最后才入栈,所以,根据栈的后进先出性质,函数总能找到第一个参数.所以,可变 ...

  3. meta详解(常用)

    1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 说明:设置浏览器的兼容模式版本.表示 ...

  4. webpack踩坑

    1.当你用webpack2实现css文件单独成一个文件的时候: 可能遇到这种错误Error: Breaking change: extract now only takes a single argu ...

  5. 最长上升子序列&&最长不下降子序列

    百练2757: 题目描述: 对于给定的序列,求出最长上升子序列的长度. 题目链接:http://bailian.openjudge.cn/practice/2757 解题思路 一.动态规划 1. 找子 ...

  6. POJ-2481 Cows---树状数组的运用

    题目链接: https://vjudge.net/problem/POJ-2481 题目大意: if Si <= Sj and Ej <= Ei and Ei - Si > Ej - ...

  7. ABI （应用程序二进制接口）

    http://baike.baidu.com/link?url=ybErtZo0zAB5_P-kKZmT_nd9FdxaAAPqW4jqtwN5Tmu_q8weayOOFOJBrXw1RLbR20sK ...

  8. Linux高性能server编程——定时器

    版权声明:本文为博主原创文章.未经博主允许不得转载. https://blog.csdn.net/walkerkalr/article/details/36869913  定时器 服务器程序通常管 ...

  9. rsync安装配置实时同步

    一.简介 1.认识 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“Rsync算法”来使本地和远 程两个主 ...

  10. C/C++语言代码规范

    1.标识符名称: 标识符名称包括函数名.常量名.变量名等.这些名字应该能反映它所代表的实际东西,具有一定的意义,使其能 够见名知义,有助于对程序功能的理解.规则如下: 所有宏定义.枚举常数和const ...