如何在 CSS 中使用遮罩 Mask

Mask 是指通过在特定点遮盖或者剪裁改变元素的外观。

mask-image

mask-image 通过读取透明度对 html 元素进行遮罩，黑色代表透明，白色代表不透明，灰色为半透明。适用于所有元素，在SVG中，它作用于包含元素和所有图形元素的容器。

/* 图片资源 */
-webkit-mask-image: url(mask.png);

/* css的渐变属性 */
 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 

/* image属性 ~ ??? */
-webkit-mask-image: image(url(mask.png), skyblue);
/* 混合属性 */
-webkit-mask-image: url('https://www.cdsy.xyz/wp-content/uploads/2022/docimg20/1494-wytystugqyk.jpg'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

mask-repeat

/* 单个值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
/* 两个值 horizontal(水平)  vertical(垂直) （以下仅为示例）*/
-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;

/* Multiple values */
-webkit-mask-repeat: space round, no-repeat;
-webkit-mask-repeat: round repeat, space, repeat-x;

/* 多层遮罩  (。・_・)/~~~*/
mask-image: url('mask1.png'), url('mask2.png');
mask-repeat: repeat-x, repeat-y;

mask-clip

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

-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Multiple values */
-webkit-mask-clip: padding-box, no-clip;
-webkit-mask-clip: view-box, fill-box, border-box;

mask-origin

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Non-standard keyword values */ 
-webkit-mask-origin: content; 
-webkit-mask-origin: padding; 
-webkit-mask-origin: border;

mask-size

.divTest{
    padding: 40px;
    background-color: #03ff36;
    background-image: url(https://www.cdsy.xyz/wp-content/uploads/2022/docimg20/1495-vniwx3axanz.jpg));
    -webkit-mask-image: url(http://image27.cdsy.xyz/DownloadImg/2011/04/2015/11077777_58.png)), url(https://www.cdsy.xyz/wp-content/uploads/2022/docimg20/1496-l5zapwyqtqw.png));
    -webkit-mask-repeat: space,repeat-y;
    -webkit-mask-clip: text; 
    -webkit-mask-size: 5%, 8%;
    border: 30px solid red;
}

mask-composite（均不支持 ）

mask-composite: add | subtract | intersect | exclude;