一、CSS3 mix-blend-mode

首先,要知道”blend-mode”就是混合模式的意思。那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SVG,干脆叫mix一起捋过来。该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。

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;           //复原

二、CSS3 background-blend-mode

background-blend-mode这个要更好理解一点,背景的混合模式。可以是背景图片见的混合,也可以是背景图片和背景色的混合。

CSS3混合模式mix-blend-mode/background-blend-mode简介 ,PS中叠加效果的更多相关文章

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

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

  2. ps中图层混合模式算法公式

    网上已经有很多讲解ps的图层混合模式,有些不详细甚至是错误的,参考网上给出的公式及其自己在验证推倒的,给出27种的混合模式算法公式.也许存在一定的错误性,毕竟没有官方给出公式,只能说以供参考吧. 只考 ...

  3. CSS3混合模式background-blend-mode

    注意:background属性中的背景图片和颜色混合,只能在一个background属性中. 属性值: background-blend-mode: normal; //正常 background-b ...

  4. ps中图层混合模式、多图层叠加、不透明度、填充、图层样式详解

    图像领域中,通过进行一下想法的时候,都要通过用ps看下是不是合理,而ps中图层是必用的一个功能,下面详解一下图层有关的叠加原理. 基本顺序是图层从下往上继续, 先计算图层的填充,再计算样式.最后计算不 ...

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

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

  6. iOS 2D绘图 (Quartz2D)之路径(stroke,fill,clip,subpath,blend)

    像往常一样 这个系列的博客是跟着大神的脚步来的.按照往例 在此贴出原博客的出处: http://blog.csdn.net/hello_hwc?viewmode=list我对大神的崇拜之情 如滔滔江水 ...

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

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

  8. Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend

    Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend 1.1. Jhlabs 好像有了可以叠加算法,但是没有找到doc1 1.2. 自己算法叠加1 1.3. 使用javaf ...

  9. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

随机推荐

  1. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  2. TFS online 自动部署配置

    概要 采用tfs online进行源码管理,并配置自动编译部署到外网上一台服务器上(阿里云虚拟机) 步骤; 下载angent,并运行脚本安装 配置release managemetn; 1)Copy ...

  3. 理解 HTTPS 的工作原理

    目标读者:理解HTTP协议,对称和非对称加密,想要了解HTTPS协议的工作原理. 读完本文,你能明白 什么是HTTPS,TLS(SSL),TLS和HTTPS是什么关系? 什么是证书和数字签名,它们是如 ...

  4. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

  5. xfce4 启用回收站

    Userspace virtual filesystem implemented as a pluggable module for gio # pacman -S gvfs

  6. QDir的mkdir和mkpath区别

    mkdir:上层目录不存在时,创建会失败.比如创建“c:\\test\test”,如果test不存在,那test也创建不了.目录已经存在时会返回false. mkpath:上层目录不存在也没关系,自动 ...

  7. Xcode命令行生成Bitcode静态库

    近两三年一直在做静态库开发 1.在Xcode工程中创建静态库的Target,最初是手动Build出真机的.a文件,模拟器的.a文件,然后再用命令行合并 2.后来一些特殊的开发者,要求加入特殊的功能,或 ...

  8. php大力力 [045节] 兄弟连高洛峰 PHP教程 2014年[已发布,点击下载]

    http://www.verycd.com/topics/2843130/ 第1部分 WEB开发入门篇第1章LAMP网站构建1.[2014]兄弟连高洛峰 PHP教程1.1.1 新版视频形式介绍[已发布 ...

  9. Lua和C语言的交互——C API

    Lua可作为扩展性语言(Lua可以作为程序库用来扩展应用的功能),同时也是个可扩展的语言(Lua程序中可以注册由其他语言实现的函数). C和Lua交互的部分称为C API.C API是一个C代码与Lu ...

  10. @SuppressWarnings注解

    简介:java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告, ...