CSS3混合模式mix-blend-mode/background-blend-mode简介 ,PS中叠加效果
一、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中叠加效果的更多相关文章
- [转] CSS3混合模式mix-blend-mode/background-blend-mode简介 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模 ...
- 神奇的CSS3混合模式
神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...
- ps中图层混合模式算法公式
网上已经有很多讲解ps的图层混合模式,有些不详细甚至是错误的,参考网上给出的公式及其自己在验证推倒的,给出27种的混合模式算法公式.也许存在一定的错误性,毕竟没有官方给出公式,只能说以供参考吧. 只考 ...
- PS中混合模式是什么意思?
PS中图层混合模式中的溶解,变暗,正片叠底,颜色加深,线性加深,叠加,柔光,亮光,强光,线性光,点光,实色混合,差值,排除,色相,饱和度,颜色,亮度各是什么原理? Normal 正常模式,也是 ...
- Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动
如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...
- css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation
css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图 ...
- CSS3混合模式background-blend-mode
注意:background属性中的背景图片和颜色混合,只能在一个background属性中. 属性值: background-blend-mode: normal; //正常 background-b ...
- CSS3总结二:(background)背景/渐变色函数
background-color(CSS2) background-image background-position background-size background-repeat backgr ...
- css3混合模式
https://juejin.im/entry/5b4802d15188251ac446d3a9
随机推荐
- bzoj 2527: [Poi2011]Meteors 整体二分
给每个国家建一个链表,这样分治过程中的复杂度就和序列长度线形相关了,无脑套整体二分就可以. (最坑的地方是如果所有位置都是一个国家,那么它的样本个数会爆longlong!!被这个坑了一次,大于p[i] ...
- SQL查询语句 常用示例
SQL语言的应用 1. 找出姓李的读者姓名和所在单位. 2. 列出图书库中所有藏书的书名及出版单位. 3. 查找高等教育出版社的 所有图书及单价,结果按单价降序排序. 4. ...
- 标准C++之运算符重载和虚表指针
1 -> *运算符重载 //autoptr.cpp #include<iostream> #include<string> using namespace std ...
- [转]eclipse重新编译
Eclipse打开时并不重新生成class文件,这就造成了eclipse找不到需要的class文件从而不能正常编译工程中的其他代码.此时就需要重新编译工程. 单击Project菜单,选择Clean菜单 ...
- Windows的基本内容
1, 进程间通信:是指进程间进行信息交换 低级方式:信号量通信(可以交换的信息量少的时候) 高级通信方式(3种):1.共享存储器系统(剪贴板) 2.消息传递系统(进程间的数据交换以消息(message ...
- Mac 效率工具
我的Mac开发环境 http://blog.csdn.net/feelang/article/details/45071249 iterm2 http://iterm2.com/documentati ...
- [UML]UML系列——类图class的泛化关系
系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图C ...
- JS高级群的日常
北京-z兄*10031*33) 2015/6/5 13:38:01北京-逍遥君武*5611*7) 2015/6/5 13:3*:082上海-goesby<woshixuleijava@****. ...
- 转 C# 只允许运行一个实例
来源:http://blog.csdn.net/jin20000/article/details/3136791 互斥进程(程序), 简单点说,就是在系统中只能有该程序的一个实例运行. 现在很多软件都 ...
- shell--2.shell数组
shell 数组 (1)定义数组 shell中,用括号表示数组,数组元素用空格分开,定义数组的一般形式 arrt_name=(val1 val2 val3) 或者 arry_name=(val1 va ...