CSS mask遮罩

一、CSS mask遮罩的过往和现状

CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。

不过那个时候，遮罩只能作为实验性的属性，做一些特效使用。毕竟那个年代还是IE浏览器的时代，属性虽好，但价值有限。

但是如今情况却大有变化，除了IE和Edge浏览器不支持，Firefox，Chrome以及移动端等都已经全线支持，其实际应用价值已不可同日而语。尤其Firefox浏览器，从版本55开始，已经全面支持了CSS3 mask属性。并且mask属性规范已经进入候选推荐规范之列，会说以后进入既定规范标准已经是板上钉钉的事情，大家可以放心学习，将来必有用处。
在这里插入图片描述

二、CSS mask属性

在过去，CSS mask属性在使用的时候就是mask: xxx，但是现在随着这个属性的规范化，mask属性实际上已经成为了诸多mask-*的缩写，这和background, border性质是一样的。

具体是哪些属性的缩写呢，可以参见下面的列表：

mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite

三、CSS mask-image属性详细介绍

mask-image指遮罩使用的图片资源，默认值是none，也就是无遮罩图片。因此，和border属性中的border-style属性类似，是一个想要有效果就必须设定的属性值。

mask-image遮罩所支持的图片类型非常的广泛，可以是url()静态图片资源，格式包括JPG，PNG以及SVG等都是支持的；也可以是动态生成的图片，例如使用各种CSS3渐变绘制的图片。语法上支持CSS3各类渐变，以及url()功能符，image()功能符，甚至element()功能符。同时还支持多背景，因此理论上，使用mask-image我们可以遮罩出任意我们想要的图形，非常强大。

眼见为实，我们通过大量案例来展示mask-image的强大之处。

下面所有案例使用原始图如下
在这里插入图片描述

最基础的png图片遮罩展示

我们使用的遮罩图片是一个名为Xia.png的图片，如下：
在这里插入图片描述
HTML如下

<img src="img.jpg" class="Xia"></img>

CSS如下

 .Xia{width:300px;height:300px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);}

在这里插入图片描述
从上面这个最基本的案例，我们可以看出，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。因此，我们很少使用jpg图片来作为遮罩图片的，因为jpg图片一定是完全不透明的，最终的效果就是原图什么也看不到。

另外，如果Xia.png加载失败，则Firefox，Chrome浏览器下直接原始图不显示。

CSS mask-mode属性详细介绍

mask-mode属性的默认值是match-source，意思是根据资源的类型自动采用合适的遮罩模式。

例如，如果我们的遮罩使用的是SVG中的<defs>中的<mask>元素，则此时的mask-mode属性的计算值是luminance，表示基于亮度遮罩。如果是其他场景，则计算值是alpha，表示基于透明度遮罩。

因此，mask-mode支持下面3个属性值：

mask-mode: alpha;此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。
mask-mode: luminance;此关键字指示掩膜层图像的亮度值应用作掩码值。
mask-mode: match-source;（默认值）根据资源的类型自动采用合适的遮罩模式。

因为mask-image支持多图片，因此mask-mode也支持多属性值，例如：

mask-mode: alpha, match-source;

例如，我们把Xia.png遮罩改成基于亮度luminance，如下CSS：

   	  .Xia{width:300px;height:300px;-webkit-mask-mode: luminance;mask-mode: luminance;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);}

结果Firefox浏览器下：
在这里插入图片描述

目前，mask-mode仅Firefox浏览器支持，因此，Chrome浏览器是看到的依然是基于alpha遮罩的效果，颜色不像上图那样淡。

五、mask-repeat属性详细介绍

mask-repeat属性的默认值是repeat，行为类似于background-repeat属性。

支持以下一些单属性值：

mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: no-repeat;
mask-repeat: space;
mask-repeat: round;

同时，根据自己的测试，Chrome和Firefox浏览器都支持x轴y轴2两轴同时表示，例如：

mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

由于mask-image支持多遮罩图片，因此，mask-repeat也支持多属性值，例如：

mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;

每个属性值的含义如下：
repeat-x
水平x平铺，效果类似：
在这里插入图片描述
repeat-y
垂直y平铺。
repeat
默认值，水平和垂直平铺。
no-repeat
不平铺，会看到就一个遮罩图形孤零零的挂在左上角。

space
space同background等属性中的space，表示遮罩图片尽可能的平铺同时不发生任何剪裁。
然而根据我的测试，在Chrome浏览器下，一侧边缘还是发生了剪裁，不过不明显。Firefox浏览器则完美表现。

round
round表示遮罩图片尽可能靠在一起没有任何间隙，同时不发生任何剪裁。这就意味着图片可能会有比例的缩放。

例如我们选择mask-repeat为round，则遮罩效果就变成这样：
在这里插入图片描述

六、mask-position属性详细介绍

mask-position和background-position支持的属性值和表现基本上都是一模一样的。

例如，mask-position默认计算值是0% 0%，也就是相对左上角定位。

支持单个关键字（缺省关键字的解析为center）：

mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

支持垂直和水平方向两个关键字：

mask-position: right top;

支持各类数值：

mask-position: 30% 50%;<
mask-position: 10px 5rem;

支持X轴和Y轴方向：

mask-position-X：30px;
mask-position-Y: 10px ;

由于mask-image支持多遮罩图片，因此，mask-position也支持多属性值，例如：

mask-position: 0 0, center;

Chrome和Firefox浏览器都支持mask-position属性，Chrome还需要-webkit-私有前缀，Firefox浏览器现在已经不需要了。

例如，在mask-repeat值为no-repeat前提下，我们选择属性值为top，则遮罩效果表现为顶部居中：
在这里插入图片描述
在no-repeat情况下，如果容器宽高比与图片宽高比不同，

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

七、mask-clip属性详细介绍

mask-clip属性性质上和background-clip类似，但是mask-clip支持的属性值要多一点，主要是多了个SVG元素的mask-clip支持。

支持属性值如下：

mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
mask-clip: no-clip;

其中默认值是border-box和background-clip类似。同样也支持多属性值：

mask-clip: content-box, border-box;

虽然支持的属性值挺多，但是对于普通元素而言，生效的其实就前面3个，Firefox浏览器还支持no-clip。

例如，已知CSS如下：

.mask-image {width: 300px; height: 300px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);border: 20px solid #34538b;padding: 20px;margin: 20px;
}

则我们选择content-box效果：
在这里插入图片描述

fill-box，stroke-box，view-box要与SVG元素关联才有效果，目前还没有任何浏览器对其进行支持。

八、mask-origin属性详细介绍

mask-origin属性性质上和background-origin类似，但是mask-origin支持的属性值要多一点，主要是多了个SVG元素的mask-origin支持。

支持属性值如下

mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

其中默认值是border-box和background-origin类似。同样也支持多属性值：

mask-origin: content-box, border-box;

虽然支持的属性值挺多，但是对于普通元素而言，目前生效的其实就前面3个。

例如，已知CSS如下：

.mask-image {width: 250px; height: 187.5px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);border: 20px solid red;padding: 20px;margin: 20px;
}

在这里插入图片描述

fill-box，stroke-box，view-box要与SVG元素关联才有效果，目前还没有任何浏览器对其进行支持。

九、mask-size属性详细介绍

mask-size属性性质上和background-size类似，支持的属性值也类似，作用是控制遮罩图片尺寸。

默认值是auto.

支持contain和cover这两个关键字：

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

mask-size: cover;
mask-size: contain;

支持各类数值（缺省高度会自动计算为auto）：

mask-size: 50%;
mask-size: 3em;
mask-size: 12px;mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;

同样支持多属性值：

mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

效果演示，如下CSS：

.mask-image {width: 250px; height: 187.5px;-webkit-mask-image: url(Xia.png);mask-image: url(Xia.png);-webkit-mask-size: cover;mask-image: cover;
}

结果效果如下图（Chrome和Firefox浏览器均如此）:
在这里插入图片描述

十、mask-type属性简介

mask-type属性功能上和mask-mode类似，都是设置不同的遮罩模式。但还是有个很大的区别，那就是mask-type只能作用在SVG元素上，本质上是由SVG属性演变而来，因此，Chrome等浏览器都是支持的。但是mask-mode是一个针对所有元素的CSS3属性，Chrome等浏览器并不支持，目前仅Firefox浏览器支持。

由于只能作用在SVG元素上，因此默认值表现为SVG元素默认遮罩模式，也就是默认值是luminance，亮度遮罩模式。如果需要支持透明度遮罩模式，可以这么设置：