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

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

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-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-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(http://cdn01.baidu-img.cn/timg?image_search&quality=80&size=b10000_10000&sec=1470644878&di=f054ab9449175833cf84b3429acacd88&imgtype=jpg&src=http%3A%2F%2Fimg0.bdstatic.com%2Fimg%2Fimage%2Fshouye%2Fxiaoxiao%2Fis099s8ky-PC.jpg));
    -webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(http://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.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;

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Canvas怎么制作雪花屏404效果，思路及方法是什么

  本文主要介绍了Canvas如何做个雪花屏版404的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• CSS3动画属性有几种，CSS3实现动画优缺点是什么

  css3动画的属性总的来说只有transform(变形)，transition(过渡)，和animation(动画)这三种。transition:1s(过渡的动画效果)：从一个人具体的值到另一个过渡的值transform:rotate(

• CSS定位叠放次序有哪些原则要注意的

  css定位叠放次序的使用注意：1、值越大，定位元素在层叠元素中越高。2、若取值相同，则按书写顺序，后来居上。3、后面的数字一定不能加单位。4、定位盒子才有z-index属性。

• chrome最小字体限制的问题如何解决？教你两种方法

  chrome最小字体限制的问题如何解决？一些朋友可能知道Chrome 默认最小字体是12px，这样的设计也是出于为了更好显示中文，但是这样的设计也有一个坏处，就是可能会出现某些上标、下标字体过大的情况，这对于用户体验并不好，那么我们有没有什么解决方法呢？接下来给大家分享两种方法，感兴趣的朋友可以了解看看。

• css三列自适应布局怎么写？教你三种方法

  css怎么写三列自适应布局？在做前端开发的时候我们经常会使用三列布局，那么两边固定，中间自适应的三列布局要怎么写呢？下面是小编整理的多种实现方法，有需要的朋友可以看一下。