前言
此文章是自己从他人那学习到的或自己遇到的一些CSS属性或者技术的总结与使用。如有不足或者错误，请大家不吝赐教，感谢。
mask遮罩属性（参考来源：CSS遮罩CSS3 mask/masks详细介绍）
兼容性
除了IE和Edge浏览器不支持，Firefox，Chrome以及移动端等都已经全线支持。
一、mask-image属性详细介绍(mask-image)
此属性指mask遮罩使用的图形资源，初始值为none，可使用url()图片遮罩，svg，cross-fade(url(),url(),50%)（图片透明叠加）以及各种CSS的渐变属性。语法上可支持url()功能符，image()功能符(目前Chrome和Firefox都尚未支持，所以不介绍了)，甚至是element()功能符（但只有Firefox浏览器支持，并且需要-moz-私有前缀）。
采用以下图片当做遮罩背景图
1.png图片遮罩
采用如下的png图片：
HTML代码如下：
<img class="g-mask-bg" src="https://user-gold-cdn.xitu.io/2019/3/19/169936a894b4a755?w=500&h=353&f=jpeg&s=55651" />
复制代码CSS代码如下：
.g-mask-bg{
width: 250px; height: 187.5px;
-webkit-mask-image: url('https://user-gold-cdn.xitu.io/2019/3/18/1698fef6bce1ab4d?w=30&h=30&f=png&s=799');
mask-image: url('https://user-gold-cdn.xitu.io/2019/3/18/1698fef6bce1ab4d?w=30&h=30&f=png&s=799');
}
复制代码效果如下：
2.svg图片遮罩
其实和用png图片的方式一样，只不过引入的是svg文件而已，如引用。
会产生如下效果：
用svg的mask元素进行遮罩的方式：
我们用下面这个svg当做遮罩元素：
创建一个svg的mask元素：
<svg>
<defs>
<mask id="mask" maskContentUnits="objectBoundingBox">
<circle cx=".5" cy=".5" r=".5" fill="white"/>
<polyline points=".375 .25,0.65625 .5,.375 .75" fill="white" stroke="black" stroke-width="0.0625"/>
mask>
defs>
svg>
<img class="g-mask-bg" src="https://user-gold-cdn.xitu.io/2019/3/19/169936a894b4a755?w=500&h=353&f=jpeg&s=55651" />
复制代码CSS代码如下：
.g-mask-bg{
width: 250px; height: 187.5px;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
复制代码但这样只有在火狐浏览器下才会有用效果如图：
要是想在其他显示效果则需要这么写：
<svg width="250" height="186">
<image xlink:href="https://user-gold-cdn.xitu.io/2019/3/19/169936a894b4a755?w=500&h=353&f=jpeg&s=55651" class="mask-image" width="250" height="186">image>
svg>
复制代码CSS如下：
.g-mask-bg{
width: 250px; height: 187.5px;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
mask: url(#mask);
}
复制代码除了Firefox浏览器，实际上目前其他所有浏览器都不支持SVG元素的
3.image-set()功能符资源作为遮罩元素
Edge, Firefox都不支持，但Chrome/Safari/Android都可以无障碍使用，意味着移动端可以放心使用。其主要功能是根据屏幕密度（设备像素比）来加载不同的图片资源。
CSS代码如下：
.g-mask-bg{
width: 250px; height: 187.5px;
-webkit-mask-image: -webkit-image-set(url('../assets/imgs/star.svg') 1x, url('https://user-gold-cdn.xitu.io/2019/3/18/1698fef6bce1ab4d?w=30&h=30&f=png&s=799') 2x);
mask-image: image-set(url('../assets/imgs/star.svg') 1x, url('https://user-gold-cdn.xitu.io/2019/3/18/1698fef6bce1ab4d?w=30&h=30&f=png&s=799') 2x);
}
复制代码上面代码表示1倍屏幕密度（设备像素比为1）设备（PC端）下使用作为遮罩图片，屏幕密度比2大（手机端）的时候使用作为遮罩图片。
4.cross-fade()功能符资源作为遮罩元素
其兼容性和image-set()类似，Chrome和移动端良好，Firefox和Edge暂不支持。
CSS代码如下：
.g-mask-bg {
width: 250px; height: 187.5px;
-webkit-mask-image: -webkit-cross-fade(url('../assets/imgs/star.svg'), url('https://user-gold-cdn.xitu.io/2019/3/18/1698fef6bce1ab4d?w=30&h=30&f=png&s=799'), 50%);
mask-image: cross-fade(url('../assets/imgs/star.svg'), url('https://user-gold-cdn.xitu.io/2019/3/18/1698fef6bce1ab4d?w=30&h=30&f=png&s=799'), 50%);
}
复制代码表示以50%的透明度与叠加显示。
5.element()功能符资源作为遮罩元素
element()功能符可以让页面上的DOM元素作为图片显示，但是只有firefox浏览器支持element()功能符，并且需要-moz-私有前缀，所以暂不重要。
页面上有这么一个DOM元素：
<h4 id="title">马萨卡马萨卡马萨卡h4>
复制代码CSS代码如下：
#title {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.g-mask-bg {
width: 250px; height: 187.5px;
-webkit-mask-image: -webkit-element(#title);
mask-image: -moz-element(#title);
mask-image: element(#title);
}
复制代码6.渐变作为遮罩图片
这里的渐变可以是任意类型的CSS3渐变，例如可以是linear-gradient()线性渐变，也可以是repeating-linear-gradient()重复线性渐变，也可以是radial-gradient()径向渐变，也可以是repeating-radial-gradient()重复径向渐变，也可以是conic-gradient锥形渐变（只要浏览器支持）。
CSS代码：
.g-mask-bg {
width: 250px; height: 187.5px;
-webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);
mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);
}
复制代码二、mask-mode属性介绍
mask-mode属性的默认值是match-source，意思是根据资源的类型自动采用合适的遮罩模式。就是如果我们的遮罩使用的是SVG中的
其现在只有Firefox支持手动改变mask-mode的属性值，所以不加详细介绍，其支持的属相值有：
{
mask-mode: alpha;//透明度
mask-mode: luminance;//亮度
mask-mode: match-source;
}
复制代码三、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-position属性介绍
mask-position和background-position支持的属性值和表现基本上都是一模一样的，不加累述。支持的关键字有：
{
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;
}
复制代码五、mask-clip属性介绍
mask-clip属性性质上和background-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。对于普通元素而言，生效的其实就前面3个属性，在我试验来看，content-box与padding-box之间并没有多大的区别。具体效果点击demo。
六、mask-origin属性介绍
mask-origin属性性质上和background-origin类似，同mask-clip一样多了个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。对于普通元素而言，生效的其实就前面3个属性。具体效果点击demo。
七、mask-size属性介绍
mask-size属性性质上和background-size类似，支持的属性值也类似，作用是控制遮罩图片尺寸。
支持属性如下：
{
mask-size: cover;
mask-size: contain;
mask-size: auto;
}
复制代码默认值是auto，查看mask-size的demo。
八、mask-composite属性介绍
mask-composite表示当同时使用多个图片进行遮罩时候的混合方式。
Firefox支持属性值：
{
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;
}
复制代码Chrome支持属性值（借鉴了Canvas中的globalCompositeOperation属性值，各个属性值详细作用可以点击这里。）：
{
mask-composite:source-over;
mask-composite:source-in;
mask-composite:source-out;
mask-composite:source-atop;
mask-composite:destination-over;
mask-composite:destination-in;
mask-composite:destination-out;
mask-composite:destination-atop;
mask-composite:plus-lighter;
mask-composite:copy;
mask-composite:clear;
mask-composite:xor;
}
复制代码具体效果点击查看demo。