CSS3 mask 遮罩的具體使用方法
發(fā)布時(shí)間:2017-11-03 15:12:03 作者:喻木同學(xué)
我要評論

這篇文章主要介紹了CSS3 mask 遮罩的具體使用方法,詳細(xì)的介紹了CSS3 mask 遮罩的具體使用,具有一定的參考價(jià)值,有興趣的可以了解一下
css的mask屬性允許使用者通過部分或者完全隱藏一個(gè)元素的可見區(qū)域。這種效果可以通過遮罩或者裁切特定區(qū)域的圖片。
mask的簡寫會將 mask-border 設(shè)為初始值。使用mask的簡寫優(yōu)于其他簡寫或者各自屬性的設(shè)置來覆蓋。這能保證mask-border也會重新設(shè)置為新的效果樣式。
mask-image
mask-image 通過讀取透明度對html元素進(jìn)行遮罩,黑色代表透明,白色代表不透明,灰色為半透明。適用于所有元素,在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
/* 單個(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(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;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
CSS mask-image屬性詳細(xì)介紹(小結(jié))
這篇文章主要介紹了CSS mask-image屬性詳細(xì)介紹(小結(jié))的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-22- 這篇文章主要介紹了CSS Masking模塊之Clipping的相關(guān)知識,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-17
詳解css3 mask遮罩實(shí)現(xiàn)一些特效
遮罩mask的功能就是使用透明的圖片或漸變遮罩元素的背景。這篇文章主要介紹了詳解css3 mask遮罩實(shí)現(xiàn)一些特效,詳細(xì)的介紹了mask的屬性以及一些常用示例,感興趣的小伙伴們2018-10-24- 這篇文章主要介紹了奇妙的 CSS 屬性 MASK,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-07-07