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
随机推荐
- [C#] 使用NPOI将Datatable保存到Excel
using (table) { IWorkbook workbook = new HSSFWorkbook(); ISheet sheet = workbook.CreateSheet(); IRow ...
- TypeScript Generics(泛型)
软件工程的一个主要部分就是构建组件,构建的组件不仅需要具有明确的定义和统一的接口,同时也需要组件可复用.支持现有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性. 在C#和 ...
- 新手指南: Linux 新手应该知道的 26 个命令
当你进入了 Linux 的世界,在下载.安装 了某个 Linux 发行版,体验了 Linux 桌面并安装了一些你喜爱和需要的软件之后,应该去了解下 Linux 真正的魅力所在:命令行.每一个 Linu ...
- Linux 下EXT2文件系统 —— 如何将蚂蚁和大象优雅的装进冰箱里
这一阵子真是偷懒,无时无刻不和自己身体中的懒癌做斗争.最终我还是被打败了,星期天两天几乎都是荒废过去的,在空闲的时候实际上我内心也是有点焦虑的,不知道去怎么度过这时间.学习吧又不想学习,看电视娱乐吧也 ...
- TeamViewer12.0.71503(远程控制软件)精简版 单文件企业版介绍
TeamViewer 是一款能在任何防火墙和 NAT 代理的后台用于远程控制,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamViewer 即可 ...
- JSVirtualMachine与JSContext
JSVirtualMachine相当于进程: JSContext相当于线程:
- PHP WAMP 文件上传 及 简单的上传预览
...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...
- Windows10环境搭建Elasticsearch+Kibana+Marvel
环境: Windows10企业版X64 Elasticsearch-2.4.1 Kibana-4.6.1 Marvel-2.0+ 步骤: 安装Elasticsearch:官网下载Elasticsear ...
- Fragment应用总结
1.FrameLayout 常用于作为Android自带组件的父节点 2.Fragment就是一个普通的Java类,用Android.app这个包 Fragment也是一个ListVi ...
- ANT的安装
1.下载ANT http://ant.apache.org/bindownload.cgi 2.将下载下来的压缩包解压到任意文件夹下,例如D盘根目录下D:/apache-ant-1.9.2 3.添加环 ...