一、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. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  2. 临时解决系统中大量的TIME_WAIT连接

    今天,偶然间发现后台服务与数据库之间有大量的TIME_WAIT的连接: [root@localhost logs]# netstat -an | grep TIME_WAIT tcp a.a.a.a: ...

  3. 用VS添加引用dll也会出错?你遇到过吗?

    使用C#开发,我们经常引用各种类库,我们通常是在Visual Studio中引用上面单击右键,添加引用...,浏览...,选择dll,确定,但是这样做会不会有什么问题呢?当然,有人到现在为止没有碰到过 ...

  4. 超人学院二期学员分享hadoop工作经验

    定于2月17日--2月23日的某一天,邀请咱们学员分享一下hadoop工作经验.对于没工作过的同学或者没从事过hadoop工作的同学,抓住机会啊,你可以提前准备自己关心的各种问题! 具体时间请关注QQ ...

  5. Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

    Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...

  6. Java——下拉列表框:JComboBox

    import java.awt.Container; import java.awt.GridLayout; import java.awt.event.WindowAdapter; import j ...

  7. 正则表达式在JS中的应用

    JavaScript表单验证email,判断一个输入量是否为邮箱email,通过正则表达式实现.//检查email邮箱function isEmail(str){       var reg = /^ ...

  8. JAVA SE 803 考试前突击

    考试的宗旨仍然是掌握基础知识,不过鉴于Oracle的这个认证考试还有不少的大家来找茬的成份在,所以一定一定要细心为上.   关于抽象类的坑点集合: 抽象类不是必须得有抽象方法,但有抽象方法的类必须是抽 ...

  9. C#设计模式(3):抽象工厂模式(Abstract Factory)(转载)

    概述 在软件系统中,经常面临着“一系列相互依赖的对象”的创建工作:同时由于需求的变化,往往存在着更多系列对象的创建工作.如何应对这种变化?如何绕过常规的对象的创建方法(new),提供一种“封装机制”来 ...

  10. win8, VS2013 .NET 4.5在哪找svcutil.exe?

    我这个纠结呀,公司用win8, .NET 4.5.想做一个很简单的项目,就是wcf宿主iis,项目根目录下有aspx文件和svc文件.于是参考了一个博客http://www.cnblogs.com/y ...