css遮罩是一种很常见的设计，因为浏览器的兼容性问题，网页上却很少使用css直接书写，一般都是切图实现。
但随着浏览器的发展，目前大部分浏览器已经得到了支持，所以我们可以了解一下如何使用css去实现异形遮罩，用以实现美观与性能兼备的炫酷网站呀！
什么是异形蒙版遮罩？
在ps这样的软件中，我们那可以将图片插入到灰色的形状中，就会产生这样的蒙版图像。
用形状来显示和隐藏元素的部分内容，就是异形蒙版遮罩。
例如，我们可以创建一个渐变蒙版
在渐变中，有填充的和透明的像素，填充的是元素的可见部分，透明的部分是元素隐藏的部分
在ps中，我们可以为一组图层添加图层蒙版
被屏蔽的内容不会擦除，注释被隐藏。
CSS中如何实现呢？
在css中，有几种方式来屏蔽元素：
mask属性clip-path属性SVG
mask 属性和 clip-path 之间的主要区别是，前者用于图像和渐变，后者用于路径。对于本文，重点将放在mask属性上。
为了更容易记住，我们可以对比一下 background 属性
css background 属性是下面这样
.card__thumb {
background-image: url('hero-cool.png');
}
CSS mask 属性是下面这样
.card__thumb {
mask-image: url('hero-cool.png');
}
有点相似，对吧
重新再看 mask 属性。
首先，我们需要将形状导出为 png 图像。
假设将蒙版应用到一个图片上
html
<img src="ahmad-shadeed-web-directions.jpg" alt="" />
css
img {
mask-image: url("shape.png");
}
默认情况下，蒙版会像css背景图片一样重复，大小等于本身图片的大小
可以将蒙版设置为不重复，就像 css 背景一样
img {
mask-image: url("shape.png");
mask-repeat: no-repeat;
}
此时能看到蒙版的位置位于左上角。我们可以通过 mask-position 来改变它
img {
mask-image: url("shape.png");
mask-repeat: no-repeat;
mask-position: center;
}
我们还可以改变蒙版的大小
img {
mask-image: url("shape.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 60%;
}
渐变遮罩
css蒙版遮罩不仅可以使用图像，还可以利用渐变来创建一些屏蔽效果。
下面的例子，蒙版图像由全黑到透明的css线性渐变组成。
img {
mask-image: linear-gradient(#000, transparent);
}
也可以使用除黑色以外的任何颜色，并且遮罩仍然可以工作，因为默认的遮罩模式被设置为 alpha
img {
mask-image: linear-gradient(red, transparent);
}
遮罩的概念是透明像素将被隐藏，下面是一个硬色块的渐变示例
img {
mask-image: linear-gradient(#000 50%, transparent 0);
}
几个实用的case
想要淡化图像并使其与下面的背景混合时
如果是以前，我们可能会考虑添加一个与背景颜色相同的渐变，就像这样
.hero__thumb:after {
position: absolute;
inset: 0;
background: linear-gradient(to top, #f1f1f1, transparent)
}
但是，当主题背景的颜色发生变化时，就会失效。
通过使用css遮罩，我们可以遮罩图片，并且可以使其与任何背景颜色一起工作。
.hero__thumb {
mask-image: linear-gradient(#000, transparent);
}
遮罩文本内容-单行遮罩
当文本较长，而空间不足时，想要开头和结尾都淡出文本，文本可以滑动，以显示剩余的内容
同理，使用渐变的方式是行不通的，因为下面的背景会发生变化，他可以是纯色，或图像，并且我们的文本是可以滑动的。
.c-card__footer {
background-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}
根据以上，我们可以制作蒙版
.c-card__footer {
mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}
当然，可以通过修改梯度值，知道得到你觉得更完美的效果。
遮罩文本内容-多行遮罩
与单行相同，但是这次是应用于垂直方向，在一些直播视频中会常见
看一下这个渐变效果
.whatever-the-class-name {
mask-image: linear-gradient(to bottom, transparent, #000);
}
遮罩列表
当我们有一个列表，想要淡出文本，让用户对其中的内容更加好奇
左边有一个列表，在底部淡出，这时就可以使用css遮罩，因为可以与下面的背景混合，无论是图片，还是黑色背景。
看下这个渐变
.list {
mask-image: linear-gradient(to bottom, #000, transparent 95%);
}
若隐若现的图片效果
使用css遮罩和渐变，可以创建多种视觉效果，看下下面这张图
上面的图像效果由5个渐变组成，通过添加不同的位置，可以得到类似的效果。
.thumb {
mask-image: linear-gradient(to bottom, #000, #000),
linear-gradient(to bottom, #000, #000),
linear-gradient(to bottom, #000, #000),
linear-gradient(to bottom, #000, #000),
linear-gradient(to bottom, #000, #000);
mask-size: 18% 70%;
mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
mask-repeat: no-repeat;
}
效果如下
为了在蒙版的每个矩形上创建衰落效果，可以给每个添加渐变
.thumb {
mask-image: linear-gradient(to bottom, transparent, #000),
linear-gradient(to bottom, #000, transparent),
linear-gradient(to bottom, transparent, #000),
linear-gradient(to bottom, #000, transparent),
linear-gradient(to bottom, transparent, #000);
mask-size: 18% 70%;
mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
mask-repeat: no-repeat;
}
圆滑的tab
让我们尝试实现边界是圆角的形式的tab
首先，让我们看下我们想要得到效果的形状
这个形状是一个正方形和一个原型组成，我们需要的是他们的交集。
如何实现呢？
可以通过多层蒙版以及蒙版复合属性来对它们进行堆叠操作
先创建一个元素用来保存蒙版
.nav-item.active:before {
content: "";
position: absolute;
left: 100%;
bottom: 0;
width: 24px;
height: 24px;
background-color: var(--active-bg);
}
在这个空间内，我们需要画一个圆和一个正方形来合成它们，可以通过混合线性渐变 和 径向渐变来实现
.nav-item.active:before {
content: "";
position: absolute;
left: 100%;
bottom: 0;
width: 24px;
height: 24px;
background-color: var(--active-bg);
background-image: linear-gradient(to top, #000, #000), radial-gradient(circle 15px at center, #000 80%, transparent 81%);
background-size: 12px 12px, 100%;
background-position: bottom left, center;
background-repeat: no-repeat, repeat;
}
- 添加 12*12 的正方形
- 正方形的位置在左下角
- 正方形不需要背景重复
以上只是用来展示两种渐变可以展示出的效果，mask-composite属性可以来合成这两个形状
.nav-item.active:before {
content: "";
position: absolute;
left: 100%;
bottom: 0;
width: 24px;
height: 24px;
background-color: var(--active-bg);
mask-image: linear-gradient(to top, red, red), radial-gradient(circle 15px at center, green 80%, transparent 81%);
mask-size: 12px 12px, 100%;
mask-position: bottom left, center;
mask-repeat: no-repeat, repeat;
mask-composite: subtract;
}
展示效果如下
可以通过 mask-position 改变位置
.nav-item.active:after {
/* other styles */
mask-position: bottom right, center;
}
完整的demo
// html
<ul>
<li>Home</li>
<li>About</li>
<li class="active">Contact</li>
<li>Dashboard</li>
</ul>
// css
@mixin round-out {
content: "";
position: absolute;
bottom: 0;
width: 24px;
height: 24px;
mask-image: linear-gradient(to top, red, red),
radial-gradient(circle 15px at center, green 80%, transparent 81%);
mask-size: 12px 12px, 100%;
mask-composite: subtract;
mask-repeat: no-repeat, repeat;
}
ul {
display: flex;
justify-content: center;
background-color: #222;
padding-top: 4rem;
li {
--default-bg: lightgrey;
--active-bg: #fff;
position: relative;
padding: 1rem 2rem;
background-color: var(--default-bg);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
&:first-child {
&:after {
@include round-out;
right: 100%;
background-color: var(--default-bg);
mask-position: bottom right, center;
}
}
&:last-child {
&:before {
@include round-out;
left: 100%;
background-color: var(--default-bg);
mask-position: bottom left, center;
}
}
&.active {
color: #222;
background-color: var(--active-bg);
z-index: 1;
&:before {
@include round-out;
left: 100%;
mask-position: bottom left, center;
background-color: var(--active-bg);
}
&:after {
@include round-out;
right: 100%;
mask-position: bottom right, center;
background-color: var(--active-bg);
}
}
}
}
body {
font-family: system-ui;
line-height: 1.45;
min-height: 1500px;
}
* {
box-sizing: border-box;
}
多形状切割
使用css遮罩，我们可以使用径向渐变来实现这种效果。
.avatar {
-webkit-mask-image: radial-gradient(ellipse 54px 135px at 11px center, #0000 30px, #000 0);
}
当然别忘了兼容性
