<!-- 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. 转 HTTP请求报文格式 GET和POST

    https://blog.csdn.net/h517604180/article/details/79802914 最近在做安卓客户端图片上传插件功能,供后台调用.其中涉及到了拼接HTTP请求报文,所 ...

  2. 网站模板-Layui：Layui

    ylbtech-网站模板-Layui:百科 layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的 ...

  3. Spring框架中的依赖注入

    依赖注入(DI : Dependency Injection)是基于.xml配置文件内节点的书写. 注入类型: 1.设置注入,调用了Bean的setXXX()进行值注入 普通属性(value值表示要显 ...

  4. php5.4编译安装--nginx

    1.下载源码包 wget 网址/源码包2.解压源码包 tar -zxvf 源码包3.创建一个安装目录 mkdir /usr/local/php4.进入解压后的目录中,初始化安装环境./configur ...

  5. 获取当前操作的IFrame 对象的方法

    分两种情况:第一种:获取iframe对象的JS函数在父页面上,如下 function getIframeByElement(element){ var iframe; $("iframe&q ...

  6. Golang基础(3)：数组，切片和字典

    一:数组 数组是一个具有相同类型元素,固定长度的有序集合,一般定义如下:var x [5]int表示数组是一个整数型数组,长度为5数组的几种定义方式 a: var来定义数组,然后依次赋值 packag ...

  7. Web Service自动化测试知识点导图

  8. XSS注入常用语句（整理）

    <script>alert('hello,gaga!');</script> //经典语句,哈哈! >"'><img src="javas ...

  9. [转帖]linux screen 命令详解，xshell关掉窗口或者断开连接，查看断开前执行的命令

    linux screen 命令详解,xshell关掉窗口或者断开连接,查看断开前执行的命令 https://binwaer.com/post/12.html yun install -y screen ...

  10. [转帖]Oracle dba_objects和all_objects 最大的区别

    Oracle dba_objects和all_objects 最大的区别 原创 Oracle 作者:maohaiqing0304 时间:2015-08-14 15:07:18  9281  0   链 ...