CSS3中mask遮罩怎么用
這篇文章主要介紹了CSS3中mask遮罩怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
為開陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及開陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、開陽網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
css的mask屬性允許使用者通過部分或者完全隱藏一個(gè)元素的可見區(qū)域。這種效果可以通過遮罩或者裁切特定區(qū)域的圖片。
mask的簡寫會將 mask-border 設(shè)為初始值。使用mask的簡寫優(yōu)于其他簡寫或者各自屬性的設(shè)置來覆蓋。這能保證mask-border也會重新設(shè)置為新的效果樣式。
mask-image
mask-image 通過讀取透明度對html元素進(jìn)行遮罩，黑色代表透明，白色代表不透明，灰色為半透明。適用于所有元素，在SVG中，它作用于包含
/* 圖片資源 */
-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('/upload/otherpic61/7925.jpg'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);mask-repeat
/* 單個(gè)值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默認(rèn)值);
/* 兩個(gè)值 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(/upload/otherpic61/7926.gif));
-webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(/upload/otherpic61/7927.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;
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中mask遮罩怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前題目：CSS3中mask遮罩怎么用
轉(zhuǎn)載源于：http://m.jiaotiyi.com/article/jsgehs.html