<!-- more -->

在线编辑demo

属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

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: saturation; //饱和度

mix-blend-mode: color; //颜色

mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始

mix-blend-mode: inherit; //继承

mix-blend-mode: unset; //复原

在线编辑demo

参考资料：

MDN: mix-blend-mode
原文地址

CSS3之mix-blend-mode的更多相关文章

  1. css3 奇技淫巧 - 如何给小汽车换个背景色谈起

    css3 的魅力,不容小觑.曾经被她折服,再度回首,依旧拜倒在她的石榴裙下.相信在未来,她仍然魅力依旧. 站在巨人的肩上学习,不断提升自身实力. 用 CSS 和颜色选择工具更改图片中的颜色,即如何给小 ...

  2. # Playables API（翻译）

        The Playables API provides a way to create tools, effects or other gameplay mechanisms by organi ...

  3. 9种CSS3 blend模式制作的鼠标滑过图片标题特效

    这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...

  4. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

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

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

  6. Atitit blend mode COLOR_DODGE 混合模式  “颜色减淡”模式

    Atitit blend mode COLOR_DODGE 混合模式  "颜色减淡"模式 1.1. 混合模式是图像处理技术中的一个技术名词1 1.2. 目录1 1.3. 颜色减淡C ...

  7. Atitti 图像处理 图像混合 图像叠加 blend 原理与实现

    Atitti 图像处理 图像混合 图像叠加 blend 原理与实现 混合模式 编辑 本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 混合模式是图像处理技术中的一个技术名词,不 ...

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

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

  9. 用Less定义常用的CSS3效果函数及常用颜色搭配（让CSS写起来更有趣）

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

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

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

随机推荐

  1. 转：C语言inline详细讲解

    本文介绍了GCC和C99标准中inline使用上的不同之处.inline属性在使用的时候,要注意以下两点:inline关键字在GCC参考文档中仅有对其使用在函数定义(Definition)上的描述,而 ...

  2. nw.js node-webkit基本程序结构与配置package.json配置说明

    (一)基本程序结构 如上图,是一个nw程序的基本组织结构,在根目录下有package.json(程序的配置文件)和index.html(可以是任意名称,应用的启动页面):js/css/resource ...

  3. Factory Kit【其他模式】

    Factory Kit public class FactoryKit { /** * Factory Kit:它定义了一个包含不可变内容的工厂,并使用独立的构建器和工厂接口来处理对象的创建. */ ...

  4. JavaScript对象---递归遍历对象

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 St ...

  5. 中国MOOC_面向对象程序设计——Java语言_期末考试编程题_1细胞自动机

    期末考试编程题 返回   这是期末考试的编程题 温馨提示: 1.本次考试属于Online Judge题目,提交后由系统即时判分. 2.学生可以在考试截止时间之前提交答案,系统将取其中的最高分作为最终成 ...

  6. ETF替代规则

    0)禁止现金替代:是指在申购.赎回基金份额时,该成份证券不允许使用现金作为替代. 1)允许现金替代:是指在申购基金份额时,允许使用现金作为全部或部分该成份证券的替代,但在赎回基金份额时,该成份证券不允 ...

  7. 【算法与数据结构】图的最小生成树 MST - Prim 算法

    Prim 算法属于贪心算法. #include <stdio.h> #define VERTEXNUM 7 #define INF 10000 typedef struct Graph { ...

  8. Dubbo分布式服务框架入门（附工程）

    要想了解Dubbo是什么,我们不防先了解它有什么用. 使用场景:比如我想开发一个网上商城项目,这个网上商城呢,比较复杂,分为pc端web管理后台,微信端销售公众号,那么我们分成四个项目,pc端网站,微 ...

  9. TCP的三次握手过程

    TCP::传输控制协议(Transmission Control Protocol )     是一种面相连接的.可靠的.基于字节流的 传输层通信协议. TCP是一种面相连接的协议.其显著的特点就是在 ...

  10. House_of_Force-ctf-bcloud

    2016 bctf bcloud 下载: https://pan.baidu.com/s/1e-fvhaOJKzBQMxlrweLznw 提取码:ded5 放入ida中首先定位到 main()-> ...