概念

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. Tomcat启动报Error listenerStart错误 | "beans" 必须匹配 DOCTYPE 根 "null" | java.lang.reflect.MalformedParameterizedTypeException

    maven打包发布工程时,发布上去却报错FAIL - Deployed application at context path /ch but context failed to start 在服务器 ...

  2. 【原创】SQL SERVER 2012安装配置说明(多图详解)

    1. 优先安装软件 1. net framework3.5. 2. 在安装SQL SERVER 2012前需要3.5的支持.在WIN 2012系统可以在系统管理的添加角色和功能中安装,如下将[.NET ...

  3. Verilog八线 - 三线优先编码器设计（74LS148）

    百度百科_74LS148 if语句法 //8线-3线优先编码器设计(74LS148) // //EI | A7 A6 A5 A4 A3 A2 A1 A0 | Y2 Y1 Y0 GS EO //0 | ...

  4. hp zbook15G2 nVidia K1100M显卡在ubuntu linux下闪屏问题

    我的hp zbook15G2有一块nVidia K1100M显卡. 故障现象 安装ubuntu 16.4之后,屏幕出现闪烁现象. 重启后,进入bios,屏幕依然在闪烁. 再重启,进入另一块硬盘的win ...

  5. make知识

    makelist 语法 https://cmake.org/cmake/help/v3.10/manual/cmake-language.7.html CMakeLists.txt I am of t ...

  6. linux lnmp搭建

    1.安装nginx: yum install gcc -y yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum inst ...

  7. 使用shell脚本实现在liunx上进行svn的上传下载更新功能

    最近有个功能,是需要从在liunx上拉取svn地址,并创建一个新文件进行提交,shell脚本如下 #!/bin/bash echo "Hello World !" myFile=& ...

  8. 广搜，深搜，单源最短路径，POJ(1130)，ZOJ(1085)

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=85 http://poj.org/problem?id=1130 这 ...

  9. 计算多项式Poj(1996)

    题目链接:http://poj.org/problem?id=1996 思路: 刚开始打了个二维表,调了一个小时,爆内存了. #include <stdio.h> #include < ...

  10. 奇异值分解(SVD)原理及应用

    一.奇异值与特征值基础知识: 特征值分解和奇异值分解在机器学习领域都是属于满地可见的方法.两者有着很紧密的关系,我在接下来会谈到,特征值分解和奇异值分解的目的都是一样,就是提取出一个矩阵最重要的特征. ...