成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

SVG蒙版(mask)的基礎(chǔ)使用教程

LittleLiByte / 2582人閱讀

摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍(lán)色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會產(chǎn)生透明度的漸變。

蒙版工作原理

設(shè)計(jì)師或者會用Sketch、Photoshop一類設(shè)計(jì)工具的朋友應(yīng)該都了解蒙版(mask)這個東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原理。

上圖中我創(chuàng)建了兩個圖層——藍(lán)色的背景和紅色的前景，并且在紅色前景上應(yīng)用了一個蒙版（右邊紅圈）。正常情況下紅色前景應(yīng)該完全遮蓋住藍(lán)色背景，但是請注意紅圈中的蒙版，我在這個蒙版上畫了一個黑色的矩形。

蒙版中黑色代表不可見（opacity: 0），白色代表可見（opacity: 100%），將蒙版對應(yīng)到紅色圖層后就很容易理解：黑色矩形在紅色圖層上對應(yīng)的區(qū)域變成了不可見，所以下層的藍(lán)色會顯示出來。

基本用法：顯示與隱藏

還是以上面Photoshop中的圖為例子，我們用SVG來一步一步地創(chuàng)建一個這樣的圖形。

先創(chuàng)建紅色前景和藍(lán)色背景

在SVG中使用蒙版需要在使用前在中定義并為其設(shè)置一個唯一id，然后在需要應(yīng)用蒙版的元素上添加一條屬性mask="url(#id)"。

光有了蒙版沒有用，我們還需要在蒙版中添加圖形元素并指定黑白顏色。

至此一個基本的蒙版就完成了，https://codepen.io/LuXuanqing...

進(jìn)階用法：透明度漸變

之前在講蒙版原理的時候說到：

黑色代表不可見（opacity: 0），白色代表可見（opacity: 100%）。

那么黑白之間的灰色代表什么呢？ 聰明的同學(xué)已經(jīng)想到了，從0%到100%是一個線性的變化，所以黑白中間的灰色會是半透明，而且不同灰度代表不同程度的半透明，越趨近白色可見度越高。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會產(chǎn)生透明度的漸變。

https://codepen.io/LuXuanqing...

總結(jié)與討論

掌握上述兩種用法基本上就足夠應(yīng)對日常需求了，但是還有另外幾個專有屬性maskUnits, maskContentUnits, x, y, width, height我現(xiàn)在完全搞不懂該怎么用，希望有所了解的朋友不吝指教。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50612.html

相關(guān)文章

  • SVG蒙版(mask)的基礎(chǔ)使用教程

    摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍(lán)色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會產(chǎn)生透明度的漸變。 蒙版工作原理 設(shè)計(jì)師或者會用Sketch、Photoshop一類設(shè)計(jì)工具的朋友應(yīng)該都了解蒙版(mask)這個東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原...

    Pines_Cheng 評論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計(jì)師使用來完成這項(xiàng)工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評論0 收藏0

  • CSS相關(guān)文章

    摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到，本文搬運(yùn)自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～ 這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

    FrozenMap 評論0 收藏0

  • 透明背景情況下遮罩出不規(guī)則圖片

    摘要：使用透明蒙版等在四個角畫三角形來遮罩出六邊形我們來一一試驗(yàn)使用透明蒙版如果純色背景還可以，但是背景要求透明的，所以第一種看樣子不大可能了。 我們在處理圖片，比如用戶頭像的時候，通常上傳的都是矩形圖片 例如：showImg(https://segmentfault.com/img/bVkHOG); 有時候根據(jù)設(shè)計(jì)師的需求，會要求是圓形或者帶圓角，這時候我們通常使用css border-...

    rozbo 評論0 收藏0

  • mask-image的應(yīng)用

    摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設(shè)計(jì)師導(dǎo)出的文件，用壓縮下得到一個。 遮罩層，如果學(xué)過Flash的同學(xué)應(yīng)該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現(xiàn)實(shí)世界中一張A4卡紙剪了個洞，我...

    HollisChuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<