如何在CSS中使用遮罩mask

如何在CSS中使用遮罩mask

 

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

 

CSS遮罩--如何在CSS中使用遮罩_CSS3, masking 教程_w3cplus

CSS3 Filter的十种特效

太棒了！mask 轻松构建炫酷CSS探照特效！

 

mask-image

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

/* 图片资源 */
-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-i