css透明背景（早读）CSS中一个非常有意思的属性mask-gradient

前言

第2000期给奇妙的CSS。今日早读文章由@chokcoco投稿分享。

正文从这开始~~

本文将介绍 CSS 中一个非常有意思的属性 mask 。

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。

语法

最基本，使用 mask 的方式是借助图片，类似这样：

类似如下使用方法：

下面这样一张图片，叠加上一个从透明到黑色的渐变，

应用了 mask 之后，就会变成这样：

淘宝导航css代码透明_淘宝导航css代码透明_css透明背景

这个 DEMO，可以先简单了解到 mask 的基本用法。

这里得到了使用 mask 最重要结论：图片与 mask 生成的渐变的 transparent 的重叠部分，将会变得透明。

值得注意的是，上面的渐变使用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff 纯色部分其实换成任意颜色都可以，不影响效果。

CodePen Demo -- 使用 MASK 的基本使用:

淘宝导航css代码透明_淘宝导航css代码透明_css透明背景

使用 MASK 进行图片裁切

利用上述简单的运用，我们可以使用 mask 实现简单的图片裁剪。

使用 mask 实现图片切角遮罩

使用线性渐变，我们实现一个简单的切角图形：

淘宝导航css代码透明_css透明背景_淘宝导航css代码透明

我们将上述渐变运用到 mask 之上，而 background 替换成一张图片，就可以得到运用了切角效果的图片：

淘宝导航css代码透明_淘宝导航css代码透明_css透明背景

CodePen Demo -- 使用 MASK 实现图片切角遮罩:

当然，实现上述效果还有其他很多种方式，譬如 clip-path，这里的 mask 也是一种方式。

多张图片下使用 mask

上述是单张图片使用 mask 的效果。下面我们看看多张图片下，使用 mask 能碰撞出什么样的火花。

假设我们有两张图片，使用 mask，可以很好将他们叠加在一起进行展示。最常见的一个用法：

css透明背景_淘宝导航css代码透明_淘宝导航css代码透明

CodePen Demo -- MASK 的基本使用，多张图片下的基本用法:

当然，注意上面我们使用的 mask 的渐变，是完全的实色变化，没有过度效果。

我们稍微修改一下 mask 内的渐变：

淘宝导航css代码透明_css透明背景_淘宝导航css代码透明

CodePen Demo -- MASK 的基本使用，多张图片下的基本用法2：

使用 MASK 进行转场动画

有了上面的铺垫。运用上面的介绍的一些方法，我们就可以使用 mask 来进行一些图片切换间的转场动画。

使用线性渐变 mask:linear-gradient() 进行切换

还是上面的 Demo，我们通过动态的去改变 mask 的值来实现图片的显示/转场效果。代码可能是这样：

<pre class="code-snippet_nowrap" style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">div {
background: url(image1.jpg);
animation: maskMove 2s linear;
}

@keyframes {
0% {
mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%);
}
1% {
mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%);
}
...
100% {
mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%);
}
}
</pre>
当然，像上面那样一个一个写，会比较费力，通常我们会借助 SASS/LESS 等预处理器进行操作。像是这样：

<pre class="code-snippet_nowrap" style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">div {
position: relative;
background: url(image2.jpg) no-repeat;

&::before {
position: absolute;
content: "";
top: 0;left: 0; right: 0;bottom: 0;
background: url(image1.jpg);
animation: maskRotate 1.2s ease-in-out;
}
}

@keyframes maskRotate {
@for $i from 0 through 100 {
#{$i}% {
mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%);
}
}
}
</pre>
可以得到下面这样的效果（单张图片的显隐及两张图片下的切换）：

淘宝导航css代码透明_css透明背景_淘宝导航css代码透明

CodePen Demo -- MASK linear-gradient 转场：

使用角向渐变 mask: conic-gradient() 进行切换

当然，除了 mask: linear-gradient()，使用径向渐变或者角向渐变也都是可以的。使用角向渐变的原理也是一样的：

css透明背景_淘宝导航css代码透明_淘宝导航css代码透明

CodePen Demo -- MASK conic-gradient 转场：

这个技巧，在这篇文章里，有更多丰富的例子，可以移步阅读：

你用的那些CSS转场动画可以换一换了：

淘宝导航css代码透明_淘宝导航css代码透明_css透明背景

运用这个技巧，我们就可以实现很多有意思的图片效果。像是这样：

css透明背景_淘宝导航css代码透明_淘宝导航css代码透明

mask 碰撞滤镜与混合模式

继续下一环节。CSS 中很多有意思的属性，和滤镜和混合模式一结合，会碰撞出更多火花。

mask & 滤镜 filter: contrast()

首先，我们利用多重径向渐变，实现这样一张图。

看着没什么特别，我们利用 filter: contrast() 对比度滤镜，改造一下。代码大概是这样：

淘宝导航css代码透明_css透明背景_淘宝导航css代码透明

这个时候，我们再叠加上不同的 mask 遮罩。即可得到各种有意思的图形效果。

CodePen Demo -- 使用 mask 搭配滤镜 contrast：

我们叠加了一个线性渐变的 mask linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5))，注意，两个渐变颜色都是带透明度的。

或者换一个径向渐变：

CodePen Demo -- 使用 mask 搭配滤镜 contrast：

好的，下一步，与上文类似，我们添加上动画。

css透明背景_淘宝导航css代码透明_淘宝导航css代码透明

淘宝导航css代码透明_淘宝导航css代码透明_css透明背景

CodePen Demo -- 使用 mask 搭配滤镜 contrast 及动画：

还记得使用 filter: hue-rotate() 色相滤镜吗。再加上它，我们可以让颜色也变化起来。

css透明背景_淘宝导航css代码透明_淘宝导航css代码透明

CodePen Demo -- 使用 mask 搭配滤镜 contrast 及动画2：

mask & 滤镜 filter: contrast() & 混合模式

接下来我们再叠加上混合模式。

注意到上面，其实我们的容器背景色是白色 #fff。

我们可以通过多嵌套一层层级，再增加一个容器背景色，再叠加上混合模式，产生不一样的效果。

先不添加使用 mask，重新构造一下结构，最终的伪代码带个是这样：

<pre class="code-snippet_nowrap" style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">``

``
</pre>
<pre class="code-snippet_nowrap" style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">.wrap {
position: relative;
height: 100%;
background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}

.inner {
height: 100%;
background: #000;
filter: contrast(700%);
mix-blend-mode: multiply;

&::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: radial-gradient(#fff, transparent);
background-size: 12px 12px;
}
}
</pre>
原理示例图如下：