CSS3 mask 遮罩的具体使用方法

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('/d/file/titlepic/fdl.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-bo暗黑者darker真实身份x | fill-box | stroke-box | view-box | no-clip;-w政治考核ebkit-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(/d/file/titlepic/timg.gif    -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 | interct | exclude;

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