<!-- 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. mybaits<set>标签的使用

    使用set标签可以将动态的配置SET 关键字,和剔除追加到条件末尾的任何不相关的逗号 1.在接口中创建方法 public void updateEmp(Employee employee); 2在映射 ...

  2. Mybaits解决实体类字段与数据库字段不一致问题

    public class Employee { private Integer id; private String lastName; private String email; private S ...

  3. 什么是HOOK功能？

    HOOK API是一个永恒的话题,如果没有HOOK,许多技术将很难实现,也许根本不能实现.这里所说的API,是广义上的API,它包括DOS下的中断,WINDOWS里的API.中断服务.IFS和NDIS ...

  4. 自动化运维--ansible(2)

    问题一:如何在多台服务器中配置Web项目上线的所有环境 解答: 1.使用ansible配置nginx服务 在安装前了解rpm与yum的区别  rpm是压缩包安装依赖包需要自己手动安装,yum安装解决依 ...

  5. leetcode 12题 数字转罗马数字

    leetcode 12题 数字转罗马数字 答案一:我的代码 代码本地运行完全正确,在线运行出错 class Solution { public: string intToRoman(int num) ...

  6. Oracle.DataAccess.Client.OracleCommand”的类型初始值设定项引发异常

    Oracle.ManagedDataAccess.dll 连接Oracle数据库不需要安装客户端 最开始,连接Oracle 数据是需要安装客户端的,ado.net 后来由于微软未来不再支持 Syste ...

  7. Neither abstinence nor excess ever renders man happy

    inch.n. 英寸 courageous.adj.勇敢的 porcelain.n.瓷器 adj.脆的 inventor. n. 发明者 trivial.adj. 不重要的 grove.n.小树林,果 ...

  8. numpy2

    1.通用函数,是一种在ndarray数据中进行逐元素操作的函数.某些函数接受一个或多个标量数值,并产生一个或多个标量结果,通用函数就是对这些函数的封装. 1.常用的一元通用函数有:abs\fabs s ...

  9. iptables添加开放端口

    查看状态 iptables -L -n 编辑/etc/sysconfig/iptables -A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT 重启 servi ...

  10. 简单的遍历xml

    #include <opencv2\opencv.hpp> #include <opencv2\highgui\highgui.hpp> #include <opencv ...