CSS3 mask 遮罩的具体使用方法

css的mask属性允许使用者通过部分 或者 完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者 裁切 特定区域的图片。

mask的简写会将 mask-border 设为初始值。使 用M ask的简写优于其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。

mask -i mage

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

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

/* css的渐变属性 */
 -webk IT -mask-image: linear-gra die nt(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('http://d.lanrentuku .COM /down/png/1410/bw_halloween/bat-3-256.png'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

mask-re PE at

/* 单个值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
/* 两个值 horizontal(水平)  vert ical (垂直) （以下仅为示例）*/
-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;

/* 多层遮罩  (。& # 12539;_・)/~~~*/
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 | m arg in-box | fill-box |  stroke -box | view-box | no-cli p; 

-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-ori gin

/* 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 -s tandard keyword values */ 
-webkit-mask-origin: content; 
-webkit-mask-origin: padding; 
-webkit-mask-origin: border;

mask-size

.div test {
    padding: 40px;
    background-color: #03ff36;
    background-image: url(http://cdn01.b ai du- img .cn/timg?image_se Arch & am p;quality=80&size=b10000_10000&sec=1470644878&di=f054ab9449175833 CF 84b3429acacd88&imgtype= jpg &src=http%3A%2F%2Fimg0.b dstat ic.com%2Fimg%2Fimage%2Fshouye%2Fxiaoxiao%2Fis099s8ky-PC.jpg));
    -webkit-mask-image: url(http://image27. 360 doc.com/DownloadImg/2011/04/2015/110 777 77_58.png)), url(http://img.t.sinajs.cn/t6/style/images/global_nav/WB_ LOG o.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 | su BT ract | intersect | exclude;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是 为你收集整理的 CSS3 mask 遮罩的具体使用方法 全部内容，希望文章能够帮你解决 CSS3 mask 遮罩的具体使用方法 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3 mask 遮罩的具体使用方法的详细内容...