<!-- 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. 使用type在对象方法中调用类方法

    type简介 type在Python中的作用是创建一个类. 我们创建类的时候一般会使用这样的方法: # -*- coding:utf-8 -*- class Student(object): coun ...

  2. leetcode-mid-math-371. Sum of Two Integers-NO-???

    mycode: 没思路啊...二级制四则运算不熟悉... 参考: 既然不能使用加法和减法,那么就用位操作.下面以计算5+4的例子说明如何用位操作实现加法: 1. 用二进制表示两个加数,a=5=0101 ...

  3. @RequestMapping 和@ResponseBody 和 @RequestBody和@PathVariable 注解 注解用法

    接下来讲解一下 @RequestMapping  和@ResponseBody 和 @RequestBody和@PathVariable 注解 注解用法 @RequestMapping 为url映射路 ...

  4. Windows下开发环境搭建

    安装Make: https://sourceforge.net/projects/gnuwin32/ 安装G++:https://sourceforge.net/projects/mingw/

  5. 用Vue来实现音乐播放器（二十三）：音乐列表

    当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列 ...

  6. Linux_PXE服务器_RHEL7

    目录 目录 前言 PXE原理 搭建PXE服务器 关闭SELinux和防火墙 配置DHCP 配置TFTP 配置FTP 配置Kickstart 前言 PXE(preboot execute environ ...

  7. centos7安装java JDK

    Java环境 1.下载jdk(用FileZilla或xshell工具连接服务器后上传到需要安装的目录) 在 /opt/deploy 下新建 java 文件夹: # mkdir / opt/deploy ...

  8. Android专项测试监控资源

    版本号 V 1.1.0 Android性能测试分为两类:1.一类为rom版本(系统)的性能测试2.一类为应用app的性能测试(本次主要关注点为app的性能测试) Android的app性能测试包括的测 ...

  9. 【Linux开发】Linux V4L2驱动架构解析与开发导引

    Linux V4L2驱动架构解析与开发导引 Andrew按:众所周知,linux中可以采用灵活的多层次的驱动架构来对接口进行统一与抽象,最低层次的驱动总是直接面向硬件的,而最高层次的驱动在linux中 ...

  10. argparse命令行传参

    import argparse parser = argparse.ArgumentParser(description='manual to this script') # 创建解析器,及其描述 p ...