3.混合模式与合成

在图形编辑软件(比如Photoshop)中,设计师很早就可以选择两个设计元素叠加时的颜色如何混合了。

CSS Compositing and Blending标准使我们可以在CSS中使用图形编辑软件的混合模式

最简单的混合模式是“正片叠加”(multiply),计算方法是源像素每个颜色通道的值乘以目标像素对应颜色通道的值,混合后的图片会变暗。可以借助灰阶来理解这种混合模式,在灰阶中0代表黑色,1代表白色。假设源值为0.8,目标值为0.5,那最终相乘后值就是\(0.8\times0.5=0.4\),偏暗了。

<article id="milky-way" class="section-milkyway section stacked inverted">
<div class="wrapper">
<h2 class="section-title">The Milky Way</h2>
<div class="section-text">
<p>...</p>
</div>
</div>
</article>
.section-milkyway {
background-image: url(img/milkyway.jpg);
background-color: #202D53; /* 给背景图片上色 */
background-blend-mode: luminosity; /* 设置混合模式为明度(luminosity) */
}

混合元素:混合元素与它们的背景。

<article id="planets" class="section-planets section stacked inverted">
<div class="wrapper">
<h2 class="section-title">The Planets</h2>
<img class="fig fig-planet" src="img/saturn.png" alt="The planet Saturn and its ring system">
<div class="section-text">
<p>...</p>
</div>
</div>
</article>
.fig-planet {
mix-blend-mode: screen; /* 使用滤色(screen)混合模式让图片与页面的背景色相融合。 */
}

文字镂空:

<h2 class="universe-title">
<svg viewBox="0 0 400 120" role="presentation">
<text>
<tspan class="universe-span-1" x="6" dy="0.8em">The Observable</tspan>
<tspan class="universe-span-2" x="3" dy="0.75em">Universe</tspan>
</text>
</svg>
</h2>
.universe-title text {
fill: #602135; /* SVG中的文本颜色通过fill属性控制 */
text-transform: uppercase;
}
.universe-span-1 {
font-size: 53.2px;
}
.universe-span-2 {
font-size: 96.2px;
} @supports (mix-blend-mode: screen) {
.universe-title {
mix-blend-mode: screen;
}
.universe-title text {
fill: #000; /* 使用混合模式的同时,也将文本的填充颜色改为黑色,让它完全透明。 */
}
}
Chrome浏览器:

IE浏览器:

**隔离**就是创建元素分组,把混合控制在分组内部。
```html

```
```css
body {
background-image: repeating-linear-gradient(45deg, #fff, #fff 20px, #eee 0, #eee 40px);
background-size: cover;
}
.group {
position: relative;
margin: 2em;
}
.group-b {
left: 200px;
opacity: 0.999;
/*isolation: isolate;*/
}
.item {
width: 100px;
height: 100px;
position: absolute;
background-color: #ccc;
mix-blend-mode: multiply;
clip-path: circle();
}
/* 省略 */
```

Firefox浏览器:

## 4.CSS中的图像处理:滤镜
**滤镜**会应用给元素及其子元素。通过滤镜可以给元素(按序)应用一种或多种特效。
```css
.universe-header {
/* 将颜色去掉50%,将对比度提示为正常值的1.5倍。 */
filter: grayscale(50%) contrast(1.5);
}
```
![](https://img2018.cnblogs.com/blog/1393432/201906/1393432-20190613101941423-1129480319.png)
通过浏览器的开发者工具来调整样式,可以看到不同值的效果。

多数滤镜既可以接受百分比值,又可以接受数值。任何大于上限值的值都会被截取为最大值。

opacity()滤镜与opacity属性的区别在于,前者的实际效果取决于它在滤镜链条中的位置。相对而言,opacity属性则总是在所有滤镜应用完之后才起作用。

色相旋转:

.fig-sun {
filter: contrast(0.34) brightness(1.6) sepia(1) hue-rotate(10deg);
mask: url(#circlemask); /* 使用SVG蒙版技术将黑色背景遮住。 */
}

先使用sepia()滤镜给图片上色,再用hue-rotate()滤镜旋转图片的整体色相,以标准色轮为参照。

太阳及其黑子的图片(原图):



给图片添加滤镜之后(旋转色相):

box-shadow会应用到元素矩形的边框盒子,而drop-shadow()滤镜应用到元素透明的轮廓。

.nav-section li {
filter: drop-shadow(0 0 .5em rgba(0,0,0,0.3));
}

blur()滤镜给元素应用高斯模糊。

.fig-planet {
filter: blur(10px);
}

使用backdrop-filter属性可以实现类似“毛玻璃”的效果。

.section-milkyway .section-text {
backdrop-filter: blur(5px);
background-color: rgba(0,0,0,0.5);
}

目前这个属性连Firefox浏览器都不支持哦~

通过CSS加载的图片也可以使用滤镜(同样地,Firefox浏览器还是不支持)。

.figure-filtered {
background-image: filter(url(img/saturn.png), grayscale(1) opacity(0.4));
}

高级滤镜:

CSS滤镜最强大的地方在于,我们可以使用SVG创建自定义滤镜。

<img class="filter-1977" src="img/cat.jpg" alt="Charles the Cat">
<svg height="0" viewBox="0 0 100 100">
<filter id="filter-1977"
primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
<feComponentTransfer result="contrastout">
<feFuncR type="linear" slope="1.1" intercept="-0.05"/>
<feFuncG type="linear" slope="1.1" intercept="-0.05"/>
<feFuncB type="linear" slope="1.1" intercept="-0.05"/>
</feComponentTransfer>
<feComponentTransfer in="contrastout" result="brightnessout">
<feFuncR type="linear" slope="1.1"/>
<feFuncG type="linear" slope="1.1"/>
<feFuncB type="linear" slope="1.1"/>
</feComponentTransfer>
<feColorMatrix in="brightnessout"
type="saturate" values="1.3" result="img" />
<feFlood flood-color="#f36abc" flood-opacity="0.3"
x="0" y="0" width="1" height="1"
result="overlay" />
<feBlend in="overlay" in2="img" mode="screen" />s
</filter>
</svg>
.filter-1977 {
filter: url(#filter-1977);
}

浏览器还没有对SVG效果实现硬件加速,因此自定义滤镜要尽量少用。

5.应用特效的次序

所有剪切、蒙版、混合和滤镜都会在其他属性之后应用,包括colorwidthheightborder、背景属性等设置元素基本外观的属性。

首先,按声明次序应用滤镜。接着剪切元素,然后应用蒙版。最后应用混合模式(opacity属性也是一种混合模式)。

参考资料:

  • 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德

CSS高级特效(下)的更多相关文章

  1. CSS高级特效(上)

    1.CSS Shapes CSS Shapes是一个新标准,旨在让Web设计者能使用各种形状. CSS Shapes包含两组新属性,一组用于设置影响盒子中内容的形状,另一组用于设置影响形状元素周边内容 ...

  2. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  3. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  4. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  5. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  6. CSS高级知识

    1.CSS变换 2.CSS动画 3.CSS高级特性及兼容性:http://caniuse.com/

  7. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  8. CSS属性操作/下

    CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...

  9. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. bzoj1680[Usaco2005 Mar]Yogurt factory*&&bzoj1740[Usaco2005 mar]Yogurt factory 奶酪工厂*

    bzoj1680[Usaco2005 Mar]Yogurt factory bzoj1740[Usaco2005 mar]Yogurt factory 奶酪工厂 题意: n个月,每月有一个酸奶需求量( ...

  2. TCP 进阶

    转自: https://www.cnblogs.com/caoyusongnet/p/9087633.html 一. 端口号 标准的端口号由 Internet 号码分配机构(IANA)分配.这组数字被 ...

  3. OSCP Learning Notes - Netcat

    Introduction to Netcat Connecting va Listening Bind Shells Attacker connects to victim on listening ...

  4. Disease Manangement 疾病管理

    题目描述 Alas! \(A\) set of \(D (1 <= D <= 15)\) diseases (numbered \(1..D\)) is rshning through t ...

  5. 关于 iframe 的小问题若干

    我们知道,iframe在传统的MVC项目里是个很常用的东西. 但这玩意用起来有时会有点烦人. 比如说:我有个一个页面套了一个iframe,iframe里面的页面通过a标签来切换.怎么做? <li ...

  6. 【JVM之内存与垃圾回收篇】程序计数器

    程序计数器 介绍 JVM 中的程序计数寄存器(Program Counter Register)中,Register 的命名源于 CPU 的寄存器,寄存器存储指令相关的现场信息.CPU 只有把数据装载 ...

  7. asp.net core 动态更新 appsetting.json方法

    如何将值更新到appsetting.json? 我正在使用官方文档中IOptions描述的模式. 当我从中读取值时appsetting.json,这可以正常工作,但是如何更新值并将更改保存回来apps ...

  8. springboot(三)SpringDataJPA完成CRUD

    参考博客—恒宇少年:https://www.jianshu.com/p/b6932740f3c0 纯洁的微笑:http://www.ityouknow.com/springboot/2016/08/2 ...

  9. MySQL(一)简介与入门

    一.数据库简介 这个博客详细介绍:http://www.cnblogs.com/progor/p/8729798.html 二.MySQL的安装 这个博客详细介绍:https://blog.csdn. ...

  10. 使用matlab进行傅里叶分析和滤波

    傅里叶分析 公式法 下例 是将振幅为1的5Hz正弦波和振幅为0.5的10Hz正弦波相加之后进行傅里叶分析. clear all N=512; dt=0.02; n=0:N-1; t=n*dt; x=s ...