CSS躬行记(7)——合成
在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性。混合模式(blending mode)是一种数学算法,可计算元素重叠部分的颜色值,目前已定义了十多种不同的混合模式。
一、元素混合
元素混合是指将元素和其背后内容(backdrop,也叫背着物)混合,由mix-blend-mode属性设置混合模式。元素背后既可以是另一个元素,也可以是父元素的背景,并且声明了mix-blend-mode属性的元素被称为前景。注意,不同层叠上下文中的元素不能混合。接下来会对已有的混合模式逐个讲解,并给出相应的计算公式,下面列出的是会用到的符号含义。
(1)Cr:计算后的颜色值。
(2)B:进行混合的公式。
(3)Cs:前景中的颜色。
(4)Cb:元素背后的颜色(backdrop color)。
1)darken
比较Cb和Cs的颜色分量(即R、G和B),选择较暗的颜色,即保留较小值。
B(Cb, Cs) = min(Cb, Cs)
下面将img元素的mix-blend-mode属性定义为darken,父元素div声明了渐变背景。在下图中,左侧是img和div默认的混合效果,右侧是使用了darken混合后的效果。
<style>
div {
background: linear-gradient(to right, rgb(48,129,242) 10%, rgb(255,204,0) 66%, rgb(255,102,0));
}
img {
mix-blend-mode: darken;
}
</style>
<div>
<img src="./avatar.png" />
</div>
2)lighten
与darken类似,但选择较亮的颜色,即保留较大值,效果如下图所示。
B(Cb, Cs) = max(Cb, Cs)
3)difference
取Cb和Cs颜色分量之差的绝对值,用较浅的颜色减去较深的颜色,效果如下图所示。
B(Cb, Cs) = | Cb - Cs |
4)exclusion
与difference类似,但对比度更低,颜色更柔和,效果如下图所示。
B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs
5)multiply
将Cb和Cs中的颜色分量相乘,得到较暗的颜色,效果如下图所示。
B(Cb, Cs) = Cb x Cs
6)screen
将Cb和Cs的颜色反转,然后相乘,最后再反转,效果如下图所示。
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
7)overlay
当Cb的颜色比Cs的颜色深时,执行multiply渲染;当Cb的颜色比Cs的颜色浅时,执行screen渲染,效果如下图所示。
B(Cb, Cs) = HardLight(Cs, Cb)
8)hard-light
也是对multiply和screen的综合应用,但判断条件与overlay相反,效果如下图所示。
if(Cs <= 0.5)
B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
9)soft-light
与hard-light类似,但颜色更加柔和,效果如下图所示。
if(Cs <= 0.5)
B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
else
B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
if(Cb <= 0.25)
D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
else
D(Cb) = sqrt(Cb)
10)color-dodge
不改变颜色,但会将其调亮,效果如下图所示。
if(Cb == 0)
B(Cb, Cs) = 0
else if(Cs == 1)
B(Cb, Cs) = 1
else
B(Cb, Cs) = min(1, Cb / (1 - Cs))
11)color-burn
与color-dodge的作用相反,将颜色调暗,效果如下图所示。
if(Cb == 1)
B(Cb, Cs) = 1
else if(Cs == 0)
B(Cb, Cs) = 0
else
B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
接下来的四个混合模式不操作颜色分量,而是以不同的方式合并Cs和Cb的色相、饱和度、亮度和颜色,会用到几个辅助函数,如下所示。
Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue ClipColor(C)
L = Lum(C)
n = min(Cred, Cgreen, Cblue)
x = max(Cred, Cgreen, Cblue)
if(n < 0)
C = L + (((C - L) * L) / (L - n))
if(x > 1)
C = L + (((C - L) * (1 - L)) / (x - L))
return C SetLum(C, l)
d = l - Lum(C)
Cred = Cred + d
Cgreen = Cgreen + d
Cblue = Cblue + d
return ClipColor(C) Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue) SetSat(C, s)
if(Cmax > Cmin)
Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
Cmax = s
else
Cmid = Cmax = 0
Cmin = 0
return C;
12)hue
将Cb的颜色的饱和度与亮度跟Cs中对应位置的色相合并,效果如下图所示。
B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
13)saturation
将Cb的颜色的色相与亮度跟Cs中对应位置的饱和度合并,效果如下图所示。
B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))
14)color
将Cb的颜色的亮度跟Cs中对应位置的色相与饱和度合并,效果如下图所示。
B(Cb, Cs) = SetLum(Cs, Lum(Cb))
15)luminosity
将Cb的颜色的色相与饱和度跟Cs中对应位置的亮度合并,效果如下图所示。
B(Cb, Cs) = SetLum(Cb, Lum(Cs))
二、背景混合
背景混合适合一个元素包含多个背景的情况,由background-blend-mode属性设置混合模式。当混合多个背景时,会从后往前进行混合。如果包含背景色,那么首先由背景色与最下层的背景图混合,其结果再与次下层的背景图混合,以此类推。
在下面的示例中,包含两个div元素,都使用lighten混合,其中第二个div元素包含背景色。两个元素的混合效果如下图所示,左侧无背景色,右侧有背景色。
<style>
div {
background: url(./avatar.png) no-repeat center,
url(./lake.png);
background-size: 40% 40%, cover;
background-blend-mode: lighten;
}
.color {
background-color: #F60;
}
</style>
<div></div>
<div class="color"></div>
注意,background-blend-mode属性可接收多种混合模式,用逗号分隔,样式如下,效果如下图所示。
div {
background-blend-mode: lighten, hard-light;
}
三、隔离
在合成的过程中,还可通过isolation属性隔离混合,即让那些元素自成一组。注意,isolation属性需要声明到某个容器元素中,并且不能和混合模式存在于同一个元素上。
接下来用一个简单的例子来演示isolation属性的用法,首先创建HTML结构,section是img的祖先元素,div是img的父元素。
<section>
<div>
<img src="./avatar.png" class="blend" />
</div>
</section>
<section>
<div class="isolation">
<img src="./avatar.png" class="blend" />
</div>
</section>
然后添加CSS样式,将混合模式声明在img元素上,第二个div元素定义了isolation属性。得到的效果如下图所示,左侧的祖先元素的背景会与图像混合,而右侧因为发生了隔离,所以就不会与背景混合。
section {
background: linear-gradient(to right, #3081F2 10%, #FC0 66%, #F60);
}
.blend {
mix-blend-mode: lighten;
}
.isolation {
isolation: isolate;
}
注意,建立层叠上下文的元素可自动独立,而不受isolation属性的影响,能发生层叠上下文的情形包括:
(1)文档根元素,例如html元素。
(2)相对或绝对定位且z-index属性值不为auto的元素。
(3)固定或粘滞定位的元素。
(4)弹性盒的子元素,且z-index属性值不为auto。
(5)网格容器的子元素,且z-index属性值不为auto。
(6)opacity属性值小于1的元素。
(7)mix-blend-mode属性值不为normal的元素。
(8)transform、filter、perspective、clip-path、mask、mask-image和mask-border属性值不为none的元素。
(9)isolation属性值为isolate的元素。
(10)-webkit-overflow-scrolling属性值为touch的元素。
(11)contain属性值为layout、paint或包含它们其中之一的合成值(例如strict、content)的元素。
(12)为will-change定义任一属性。
CSS躬行记(7)——合成的更多相关文章
- CSS躬行记(1)——CSS基础拾遗
一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒 ...
- CSS躬行记(2)——伪类和伪元素
一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...
- CSS躬行记(8)——裁剪和遮罩
一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是 ...
- CSS躬行记(9)——网格布局
网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CS ...
- CSS躬行记(3)——CSS属性拾遗
一.粘滞定位 粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间.它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样:第二种是最近的滚 ...
- CSS躬行记(4)——浮动形状
CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子.函数和图像. 一.形状盒子 形状盒子( ...
- CSS躬行记(6)——滤镜
滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜. 一.调色滤镜 调色滤镜可控制元素的模糊.颜色.亮度等变化,并且多个滤镜可组合在一起使用.这些滤镜大部 ...
- CSS躬行记(10)——CSS方法论
方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构 ...
- CSS躬行记(11)——管理后台响应式改造
为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px ...
随机推荐
- Java中的集合类、Lambda、鲁棒性简述
集合类 在java.util包中提供了一些集合类,常用的有List.Set和Map类,其中List类和Set类继承了Collection接口.这些集合类又称为容器,长度是可变的,数组用来存放基本数据类 ...
- sql MySQL5.7 安装 centos docker
MySQL5.7 安装 1 . 普通安装 # 准备工作 停止以前的数据库并删除配置文件 systemctl stop mysqld rpm -e mysql-community-server-5.7. ...
- [codeforces]Page Numbers <模拟>
描述: «Bersoft» company is working on a new version of its most popular text editor — Bord 2010. Bord, ...
- CodeForces 280B(枚举 + 单调栈应用)
题目链接 思路如下 这题恶心的枚举任意区间的 最大值及次最大值 ,正常的操作是,是很难实现的,但偏偏有个 单调栈这个动西,能够完成这个任务,跟单调队列相似,有单调 递增.递减的栈,这一题我们需要维护的 ...
- MySQL 同步复制及高可用方案总结
1.前言 mysql作为应用程序的数据存储服务,要实现mysql数据库的高可用.必然要使用的技术就是数据库的复制,如果主节点出现故障可以手动的切换应用到从节点,这点相信运维同学都是知道,并且可以实现的 ...
- 解决VS项目程序运行完就自动关闭窗口
VS的程序运行完会关闭窗口,需要设置工程属性 笔者虽然是Java开发者,但是学习用到了C++与C语言,之前使用的是dev与codeblock并没有这个情况,那么如何解决 首先你有这个hello,wor ...
- Springboot项目中 前端展示本地图片
Springboot项目中 前端展示本地图片 本文使用的是Springboot官方推荐的thymeleaf(一种页面模板技术) 首先在pom文件加依赖 <dependency> <g ...
- usdt钱包对接,usdt 对接交易平台,usdtapi,以太坊对接,以太坊代币对接
usdt钱包对接,usdt 对接交易平台,usdtapi,以太坊对接,以太坊代币对接 自动充提币接口开发. 可对接:商城系统,游戏APP,交易平台,网站,各类APP -实现自动充提,查询,上链等功能接 ...
- spring初级java 应用。搭建环境。基本语法
搭建环境完成之后.使用spring config editor打开配置的spring xml文件. 自己实现了,spring在java上的一些基本的应用.一共看了四节视频.下面是自己实现的编码: 最基 ...
- Java第三十天,I/O操作
一.基本概念 输入输出一般是相对与内存.CPU寄存器.当前进程来说的 输入:从硬盘.键盘等外部设备读取数据到内存.当前进程或CPU寄存器中 输出:利用当前进程将数据写入到硬盘.终端显示屏等外部设备中 ...