国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

透明背景情況下遮罩出不規則圖片

rozbo / 3171人閱讀

摘要：使用透明蒙版等在四個角畫三角形來遮罩出六邊形我們來一一試驗使用透明蒙版如果純色背景還可以，但是背景要求透明的，所以第一種看樣子不大可能了。

我們在處理圖片，比如用戶頭像的時候，通常上傳的都是矩形圖片
例如：

有時候根據設計師的需求，會要求是圓形或者帶圓角，這時候我們通常使用css border-radius來達到這一效果：

css.avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
}
.avatar > img {
    width: 100%;
    height: 100%;
}

但是這次遇到的一個需求是，圖片要不規則顯示出來，設計稿中是這樣的

好我們來想可能辦法，總體思路是遮罩，難點是遮罩出的圖片是不規則，要有白色邊框，背景透明。

使用png透明蒙版

css shape、clip等

在四個角畫三角形來遮罩出六邊形

canvas

svg

我們來一一試驗：

使用png透明蒙版

如果純色背景還可以，但是背景要求透明的，所以第一種看樣子不大可能了。

css shape、clip等 
css-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

這樣確實可以畫出來六邊形，背景也可以是透明，如果仔細研究還有可能畫出白色的邊框但是

這樣畫出來是完全的標準六邊形，而設計稿是帶設計師傲嬌的圓角的，顯然不符合精準還原。
http://jsfiddle.net/chromefans/30oepvhz/3/embedded/

在四個角畫三角形來遮罩出六邊形

這樣也確實可以畫出六邊形，但是實現出來效果和css shape一樣，標準六邊形，只是兼容性要好一些。

canvas

我這里沒做canvas的demo，就不演示了，如果實在沒有完美的方式，就回來用canvas。

svg

好的，終于碼到這里了……
在經過一系列研究探討之后，發現了這篇文章
http://www.html5rocks.com/en/tutorials/masking/adobe/
文中很巧妙的實現了在不規則情況下顯示圖片，還可以透明背景，在查閱mdn后，還原了設計稿。

還原一下步驟，這個方式需要設計師配合導出一個處理好透明區域的svg，在使用-webkit-mask-box-image方法把svg當做蒙版，這時輸出的圖片已經是六邊形的了。
那白色邊框怎么辦？
既然頭像大小是固定的，渲染出來六邊形也是固定的，那就。

切一個蓋在上面吧。

demo：
http://jsfiddle.net/chromefans/p3t6pdqe/1/embedded/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111008.html

相關文章

  • 圖片放大鏡注釋詳解

    摘要：今天的練習是做一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來說就是圖片中有對應的區域讓你看到放大后的效果。關于布局就是兩組，第一組大放圖片，小的是遮蓋層。 今天的練習是做一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來說就是圖片中有對應的區域讓你看到放大后的效果。關于布局：就是兩組div，第一組大div放圖片，小的是遮蓋層。第二組是大圖div顯示框，里面放大張圖片，超過部分隱藏，...

    yck 評論0 收藏0

  • 圖片放大鏡注釋詳解

    摘要：今天的練習是做一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來說就是圖片中有對應的區域讓你看到放大后的效果。關于布局就是兩組，第一組大放圖片，小的是遮蓋層。 今天的練習是做一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來說就是圖片中有對應的區域讓你看到放大后的效果。關于布局：就是兩組div，第一組大div放圖片，小的是遮蓋層。第二組是大圖div顯示框，里面放大張圖片，超過部分隱藏，...

    waltr 評論0 收藏0

  • 圖片放大鏡注釋詳解

    摘要：今天的練習是做一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來說就是圖片中有對應的區域讓你看到放大后的效果。關于布局就是兩組，第一組大放圖片，小的是遮蓋層。 今天的練習是做一個網購網站常見的圖片詳情介紹的放大鏡效果，簡單來說就是圖片中有對應的區域讓你看到放大后的效果。關于布局：就是兩組div，第一組大div放圖片，小的是遮蓋層。第二組是大圖div顯示框，里面放大張圖片，超過部分隱藏，...

    starsfun 評論0 收藏0

  • 部分全透明遮罩層

    摘要：騰訊微云，在新用戶剛進入網站時的提示。第一眼看到這樣的部分全透明遮罩的效果，感覺實現的方式有使用圖片，在相應的位置進行挖空全透明處理。 騰訊微云，在新用戶剛進入網站時的提示。第一眼看到這樣的部分全透明遮罩的效果，感覺實現的方式有： 1.使用圖片，在相應的位置進行挖空全透明處理。但是這樣如果有多處提示，就得使用多張圖片 2.或者像騰訊微云自己的實現方式，壘積木似的一塊一塊拼接，這樣做缺...

    young.li 評論0 收藏0

  • 創建華麗 UI 的 7條規則 ?第二部分 (2019年更新)

    這是這個系列的第二篇，第一篇這見 這里： 以下是這個系列的簡潔 UI 的 7 條規則： 光來自天空 (Light comes from the sky) 黑白優先 (Black and white first) 加倍你的空白 (Double your whitespace) 學習在圖像上疊加文本的方法 ( Learn the methods of overlaying text on image...

    李文鵬 評論0 收藏0

發表評論

0條評論

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