🍀 每日思考：也许我们真正需要的不是追求完美，而是自洽的从容 🎀。
🍀 本专栏致力于分享css技术，努力做到让大家快速回忆和快速上手该css技术。如果对你有帮助的话，别忘了点个赞奥✨。我是Wandra,我们下期再见🌷

本质作用

🍀 mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过一个或者多个 遮罩图片来隐藏一个使用该遮罩的元素的部分或者全部可见区域 ，具体隐藏情况取决于元素的形状、遮罩图片的形状、大小、repeat情况、origin、透明度或者亮度、遮罩模式等等。

应用场景

小箭头效果

css 复制代码

// 伪代码
label
    { 
        --t: round(.8em, 1px); 
        --r: round(.8em, 1px); } 
    output:before { 
        border-bottom: var(--t) solid #0000;
        border-radius: var(--r)/var(--r) var(--r) calc(var(--r) + var(--t)) calc(var(--r) + var(--t));
        --_m: 100%/var(--t) calc(var(--t) + 1px) no-repeat; 
        --_g: 100%, #0000 99%, #000 102%; 
        mask: 
            linear-gradient(#000 0 0) padding-box,
            radial-gradient(100% 100% at 100% var(--_g)) calc(50% + var(--t)/2) var(--_m), 
            radial-gradient(100% 100% at 0 var(--_g)) calc(50% - var(--t)/2) var(--_m); }

🍀 遮罩效果

xml 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

🍀 给元素的背景图片加上渐隐效果：

css 复制代码

{
    background: url(image.png) ;

    // gradient 渐变作为遮罩图片
    mask: linear-gradient(90deg, transparent, #fff);
}

🍀 使用 mask 实现图片切角遮罩

css 复制代码

background: url(image.png);
mask:
    linear-gradient(135deg, transparent 15px, #fff 0)
    top left,
    linear-gradient(-135deg, transparent 15px, #fff 0)
    top right,
    linear-gradient(-45deg, transparent 15px, #fff 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, #fff 0)
    bottom left;
mask-size: 50% 50%;
mask-repeat: no-repeat;

🍀 多张图片下使用 mask:

css 复制代码

div {
    position: relative;
    background: url(image1.jpg);

    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(image2.jpg);
        mask: linear-gradient(45deg, #000 40%, transparent 60%)
    }
}

🍀 使用 MASK 进行转场动画或者使用角向渐变 mask: conic-gradient() 进行切换

css 复制代码

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%);
        }
    }
}

@keyframes maskRotate {
    @for $i from 0 through 100 {
        #{$i}% {
            mask: conic-gradient(#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent);
        }
    }
}

🍀 mask 碰撞滤镜与混合模式

css 复制代码

body {
    filter: contrast(5);
}

div {
    position: relative;
    background: #fff;

    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
        mask: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
        // 或者
        mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
        animation: maskMove 15s infinite linear;
    }
}


@keyframes maskMove {
    @for $i from 0 through 100 {
        #{$i}% {
            mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 +  '%'});
        // filter: hue-rotate()
        }
    }

mask属性

🍀 描述：使用CSS遮罩，您可以创建一个遮罩层放置在元素上，以部分或完全隐藏元素的某些部分。该mask属性是一个简写属性，具体属性划分在下列属性分类一栏中已经列出～。
🍀 兼容：

属性分类

mask-image

🍀 描述：mask-image 指遮罩使用的图片资源。蒙板图像需要有透明或半透明区域。
🍀 默认值：none，也就是无遮罩图片。
🍀 属性值：

url()：静态图片资源，格式包括JPG，PNG以及SVG
gradient渐变：语法上支持CSS3各类渐变，如linear-gradient()线性渐变、repeating-linear-gradient()重复线性渐变、radial-gradient()径向渐变、repeating-radial-gradient()重复径向渐变、conic-gradient锥形渐变。

css 复制代码

.mask-image {
    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);
}

image():
image-set()：让不同屏幕密度设备加载不同的图片资源作为遮罩图片

css 复制代码

.mask-image {
    width: 250px; height: 187.5px;

    // 表示1倍屏幕密度（设备像素比为1）设备下使用loading.png作为遮罩图片，屏幕密度比2大的时候使用star.svg作为遮罩图片。
    -webkit-mask-image: -webkit-image-set(url(loading.png) 1x, url(star.svg) 2x);
    mask-image: image-set(url(loading.png) 1x, url(star.svg) 2x);
}

cross-fade()：percentage 50%是作用在第二张图片上的，可以让后面一站图片(2.jpg)半透明，然后产生图片透明度叠加效果

css 复制代码

.mask-image {
    width: 250px; height: 187.5px;
  // 表示含义是star.svg这张图片保持为50%透明度
    -webkit-mask-image: -webkit-cross-fade(url(loading.png), url(star.svg), 50%);
    mask-image: cross-fade(url(loading.png), url(star.svg), 50%);
}

element():让页面上的DOM元素作为图片显示, 在当前状况下，我们是无法控制背景图片的透明度，旋转，或是动态给背景图片增加文字什么的。但是，我们可以在普通img标签下的图片上做这些事情，于是，引用element属性，让图片元素映射为元素的背景图片，我们在屏幕之外控制该图片的旋转啊什么的，就可以实现元素背景图片的旋转效果了

css 复制代码

<h4 id="title">作为图片的标题文字</h4>
#title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: -webkit-element(#title);
    mask-image: -moz-element(#title);
    mask-image: element(#title);
}

base64内嵌图片

🍀 应用：

很少使用jpg图片来作为遮罩图片的，因为jpg图片一定是完全不透明的，最终的效果就是原图什么也看不到。

🍀 扩展：

支持mask定义多个图片资源
img元素可以直接使用mask遮罩
普通元素也可以使用mask遮罩作用于背景颜色

🍀 兼容：

mask-mode

🍀 描述：表示遮罩模式，通过设置遮罩模式 来决定如何影响对原始图片的遮罩效果。
🍀 默认值：match-source，意思是根据资源的类型自动采用合适的遮罩模式。例如，如果我们的遮罩使用的是SVG中的<defs>中的<mask>元素，则此时的mask-mode属性的计算值是luminance，表示基于亮度遮罩。如果是其他场景，则计算值是alpha，表示基于透明度遮罩。
🍀 属性值：

css 复制代码

// 基于透明度遮罩
mask-mode: alpha;

// 基于亮度遮罩
mask-mode: luminance;

// 根据资源的类型自动采用合适的遮罩模式
mask-mode: match-source;

🍀 应用：
🍀 扩展：

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

css 复制代码

mask-mode: alpha, match-source;

// 把loading.png遮罩改成基于亮度luminance，
.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(loading.png);
    mask-image: url(loading.png);
    -webkit-mask-mode: luminance;
    mask-mode: luminance;
}

🍀 兼容：

mask-repeat

🍀 描述：
🍀 默认值：repeat
🍀 值：

css 复制代码

// 水平x平铺
mask-repeat: repeat-x;

// 垂直y平铺
mask-repeat: repeat-y;

// 默认值，水平和垂直平铺
mask-repeat: repeat;

// 不平铺，会看到就一个遮罩图形孤零零的挂在左上角
mask-repeat: no-repeat;

// space同background等属性中的space，表示遮罩图片尽可能的平铺同时不发生任何剪裁
mask-repeat: space;

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

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

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

r 复制代码

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

🍀 兼容：

mask-position

🍀 默认值：0% 0%，也就是相对左上角定位

🍀 值：

css 复制代码

// 支持单个关键字（缺省关键字的解析为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;

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

css 复制代码

mask-position: 0 0, center;

🍀 兼容：

mask-clip

🍀 描述 mask-clip 属性性质上和background-clip类似，但是mask-clip支持的属性值要多一点，主要是多了个SVG元素的mask-clip支持
🍀 默认值：border-box
🍀 属性值：

css 复制代码

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;

🍀 扩展：outline轮廓，又例如box-shadow盒阴影，都是可以应用遮罩效果的。

css 复制代码

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

限制：fill-box，stroke-box，view-box要与SVG元素关联才有效果
🍀 兼容：

mask-origin

🍀描述：mask-origin属性性质上和background-origin类似，但是mask-origin支持的属性值要多一点，主要是多了个SVG元素的mask-origin支持。
🍀 默认值：其中默认值是border-box
🍀 属性值

css 复制代码

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

🍀 扩展值：也支持多属性值

css 复制代码

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

🍀 限制：fill-box，stroke-box，view-box要与SVG元素关联才有效果
🍀 兼容

mask-size

🍀 描述：作用是控制遮罩图片尺寸。
🍀 默认值：auto
🍀 属性值：

css 复制代码

// 支持contain和cover这两个关键字：
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;

扩展：支持多属性值

css 复制代码

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

🍀 兼容

mask-type

🍀 描述：mask-type属性功能上和mask-mode类似，都是设置不同的遮罩模式。但还是有个很大的区别，那就是mask-type只能作用在SVG元素上，本质上是由SVG属性演变而来。
默认值：于只能作用在SVG元素上，因此默认值表现为SVG元素默认遮罩模式，也就是默认值是luminance，亮度遮罩模式。如果需要支持透明度遮罩模式，可以这么设置：

css 复制代码

mask-type: alpha;

🍀 兼容：

mask-compisite

🍀 描述：mask-composite表示当同时使用多个图片进行遮罩时候的混合方式
🍀 默认值：source-over
🍀 属性值

css 复制代码

// 遮罩累加
mask-composite: add;

// 遮罩相减。也就是遮罩图片重合的地方不显示。意味着遮罩图片越多，遮罩区域越小。
mask-composite: subtract;

// 遮罩相交。也就是遮罩图片重合的地方才显示遮罩
mask-composite: intersect;

// 遮罩排除。也就是后面遮罩图片重合的地方排除，当作透明处理。
mask-composite: exclude;

💡 💡 Chrome浏览器mask-composite支持的属性值有变化

css 复制代码

// 遮罩累加
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;

🍀 兼容

参考资源

chokcoco大佬：
- mask: www.cnblogs.com/coco1s/p/13...
张鑫旭老师：
- mask: www.zhangxinxu.com/wordpress/2...
- element(): www.zhangxinxu.com/wordpress/2...
知名的MDN:
- mask: developer.mozilla.org/en-US/docs/...
w3chools
- mask: www.w3schools.com/css/css3_ma...

🍀 本专栏致力于分享css技术，努力做到让大家快速回忆和快速上手该css技术。如果对你有帮助的话，别忘了点个赞奥✨。我是Wandra,我们下期再见🌷

非常有意思的mask遮罩：包全包易懂～

本质作用

应用场景

mask属性

属性分类

mask-image

mask-mode

mask-repeat

mask-position

mask-clip

mask-origin

mask-size

mask-type

mask-compisite

参考资源