An example of how to use CSS3 mask in detail

The Mask property of CSS allows the consumer to partially or completely hide the visible area of an element. This effect can be masked or trimmed to a specific area of the picture. This paper mainly introduces the specific use of CSS3 mask mask, introduces the specific use of CSS3 mask mask, has a certain reference value, interested can understand, hope to help everyone.

The shorthand for mask sets Mask-border to the initial value. Use the shorthand of mask to override other shorthand or the settings of the respective property. This will ensure that the Mask-border will also be reset to the new effect style.

Mask-image

Mask-image masks HTML elements by reading transparency, black is transparent, white is opaque, and gray is translucent. Applies to all elements, in SVG, it acts on containers that contain <defs> elements and all graphical elements.

/* Picture Resource */-webkit-mask-image:url (mask.png);/* CSS Gradient Properties */-webkit-mask-image:linear-gradient (to Bottom, Rgba (0,0,0,1) , Rgba (0,0,0,0)); /* Image Property ~??? */-webkit-mask-image:image (URL (mask.png), skyblue);/* Mixed attribute */-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

/* Single Value */-webkit-mask-repeat:no-repeat | Repeat-x | repeat-y | Space | Round | Repeat (default);/* Two values horizontal (horizontal)  Vertical (vertical) (only example below) */-webkit-mask-repeat:repeat space | Repeat repeat | round SP Ace | No-repeat round;/* Multiple values */-webkit-mask-repeat:space round, No-repeat;-webkit-mask-repeat:round repeat, Space, repeat-x;/* Multilayer matte  (. _)/~~~*/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

. ptest{    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 (ಥ_ಥ not supported)

Mask-composite:add | Subtract | Intersect | Exclude