資訊專欄INFORMATION COLUMN
摘要：使用透明蒙版等在四個(gè)角畫三角形來遮罩出六邊形我們來一一試驗(yàn)使用透明蒙版如果純色背景還可以，但是背景要求透明的，所以第一種看樣子不大可能了。
我們在處理圖片，比如用戶頭像的時(shí)候，通常上傳的都是矩形圖片
例如：
有時(shí)候根據(jù)設(shè)計(jì)師的需求，會要求是圓形或者帶圓角，這時(shí)候我們通常使用css border-radius來達(dá)到這一效果：
css.avatar {
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
}
.avatar > img {
width: 100%;
height: 100%;
}
但是這次遇到的一個(gè)需求是，圖片要不規(guī)則顯示出來，設(shè)計(jì)稿中是這樣的
好我們來想可能辦法，總體思路是遮罩，難點(diǎn)是遮罩出的圖片是不規(guī)則，要有白色邊框，背景透明。
使用png透明蒙版
css shape、clip等
在四個(gè)角畫三角形來遮罩出六邊形
canvas
svg
我們來一一試驗(yàn)：
使用png透明蒙版如果純色背景還可以，但是背景要求透明的，所以第一種看樣子不大可能了。
css shape、clip等css-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
這樣確實(shí)可以畫出來六邊形，背景也可以是透明，如果仔細(xì)研究還有可能畫出白色的邊框但是
這樣畫出來是完全的標(biāo)準(zhǔn)六邊形，而設(shè)計(jì)稿是帶設(shè)計(jì)師傲嬌的圓角的，顯然不符合精準(zhǔn)還原。
http://jsfiddle.net/chromefans/30oepvhz/3/embedded/
這樣也確實(shí)可以畫出六邊形，但是實(shí)現(xiàn)出來效果和css shape一樣，標(biāo)準(zhǔn)六邊形，只是兼容性要好一些。
canvas我這里沒做canvas的demo，就不演示了，如果實(shí)在沒有完美的方式，就回來用canvas。
svg好的，終于碼到這里了……
在經(jīng)過一系列研究探討之后，發(fā)現(xiàn)了這篇文章
http://www.html5rocks.com/en/tutorials/masking/adobe/
文中很巧妙的實(shí)現(xiàn)了在不規(guī)則情況下顯示圖片，還可以透明背景，在查閱mdn后，還原了設(shè)計(jì)稿。
還原一下步驟，這個(gè)方式需要設(shè)計(jì)師配合導(dǎo)出一個(gè)處理好透明區(qū)域的svg，在使用-webkit-mask-box-image方法把svg當(dāng)做蒙版，這時(shí)輸出的圖片已經(jīng)是六邊形的了。
那白色邊框怎么辦？
既然頭像大小是固定的，渲染出來六邊形也是固定的，那就。
切一個(gè)蓋在上面吧。
demo：
http://jsfiddle.net/chromefans/p3t6pdqe/1/embedded/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111008.html
摘要：騰訊微云，在新用戶剛進(jìn)入網(wǎng)站時(shí)的提示。第一眼看到這樣的部分全透明遮罩的效果，感覺實(shí)現(xiàn)的方式有使用圖片，在相應(yīng)的位置進(jìn)行挖空全透明處理。 騰訊微云，在新用戶剛進(jìn)入網(wǎng)站時(shí)的提示。第一眼看到這樣的部分全透明遮罩的效果，感覺實(shí)現(xiàn)的方式有： 1.使用圖片，在相應(yīng)的位置進(jìn)行挖空全透明處理。但是這樣如果有多處提示，就得使用多張圖片 2.或者像騰訊微云自己的實(shí)現(xiàn)方式，壘積木似的一塊一塊拼接，這樣做缺...
這是這個(gè)系列的第二篇，第一篇這見 這里： 以下是這個(gè)系列的簡潔 UI 的 7 條規(guī)則： 光來自天空 (Light comes from the sky) 黑白優(yōu)先 (Black and white first) 加倍你的空白 (Double your whitespace) 學(xué)習(xí)在圖像上疊加文本的方法 ( Learn the methods of overlaying text on image...
閱讀 2101·2021-11-24 09:39
閱讀 1225·2021-09-10 11:25
閱讀 1893·2021-09-08 10:42
閱讀 3847·2021-09-06 15:00
閱讀 2565·2019-08-30 15:54
閱讀 3174·2019-08-29 17:08
閱讀 3348·2019-08-29 11:26
閱讀 2888·2019-08-28 18:27
