如何在CSS中使用遮罩mask

02-04

mask 是指通過在特定點遮蓋或者剪裁改變元素的外觀。

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

CSS3 Filter的十種特效

太棒了！mask 輕鬆構建炫酷CSS探照特效！

mask-image

mask-image 通過讀取透明度對html元素進行遮罩，黑色代表透明，白色代表不透明，灰色為半透明。適用於所有元素，在SVG中，它作用於包含<defs>元素和所有圖形元素的容器。

/* 圖片資源 */n-webkit-mask-image: url(mask.png);nn/* css的漸變屬性 */n -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); nn/* image屬性 ~ ??? */n-webkit-mask-image: image(url(mask.png), skyblue);n/* 混合屬性 */n-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);n

mask-repeat

/* 單個值 */n-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默認值);n/* 兩個值 horizontal(水平) vertical(垂直) （以下僅為示例）*/n-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;nn/* Multiple values */n-webkit-mask-repeat: space round, no-repeat;n-webkit-mask-repeat: round repeat, space, repeat-x;nn/* 多層遮罩 (。?_?)/~~~*/nmask-image: url(mask1.png), url(mask2.png);nmask-repeat: repeat-x, repeat-y;n

mask-clip

-webkit-mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip;nn-webkit-mask-clip: border;n-webkit-mask-clip: padding;n-webkit-mask-clip: content;n-webkit-mask-clip: text;nn/* Multiple values */n-webkit-mask-clip: padding-box, no-clip;n-webkit-mask-clip: view-box, fill-box, border-box;n

mask-origin

/* Keyword values */nmask-origin: content-box;nmask-origin: padding-box;nmask-origin: border-box;nmask-origin: margin-box;nmask-origin: fill-box;nmask-origin: stroke-box;nmask-origin: view-box;nn/* Multiple values */nmask-origin: padding-box, content-box;nmask-origin: view-box, fill-box, border-box;nn/* Non-standard keyword values */ n-webkit-mask-origin: content; n-webkit-mask-origin: padding; n-webkit-mask-origin: border;n

mask-size

.divTest{n padding: 40px;n background-color: #03ff36;n 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));n -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));n -webkit-mask-repeat: space,repeat-y;n -webkit-mask-clip: text; n -webkit-mask-size: 5%, 8%;n border: 30px solid red;n}n

mask-composite （均不支持 ? _ ? ）

mask-composite: add | subtract | intersect | exclude;n