CSS 小技巧 | 一行程式碼實現頭像與國旗的融合

chokcoco發表於2021-10-01
CSS行程

到國慶了，大家都急著給祖國母親慶生。

每年每到此時，微信朋友圈就會流行起給頭像裝飾上國旗，而今年又流行這款：

emm，很不錯。

那麼，將一張國旗圖片與我們的頭像，快速得到想要的頭像，使用 CSS 如何簡單實現呢？

有人認為是改變其中一張圖的透明度，實際上不是的。仔細觀察合成後的頭像，最左邊的基本上只能看到紅旗看不到原本的頭像內容，而最右邊基本只能看到頭像而不再顯示紅旗的紅色背景。

在 CSS 中使用 mask 遮罩，一行程式碼實現頭像與國旗的融合

在 CSS 中，我們僅僅需要將兩張圖片疊加在一起，對上層的圖片使用 mask 屬性，一行程式碼即可實現該效果。

<div></div>
div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    // 正常頭像
    background: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // 國旗圖片
    background: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

在上面的程式碼中，我們利用了 div 和它的一個偽元素 div::after，實現了將頭像和國旗疊加在一起。

只需要在 div::after 中，設定一層 mask 遮罩 mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent)，我們就可以實現頭像與國旗的巧妙疊：

簡單介紹下 Mask

在 CSS 中，mask 屬性允許使用者通過遮罩或者裁切特定區域的圖片的方式來隱藏一個元素的部分或者全部可見區域。

最基本，使用 mask 的方式是藉助圖片，類似這樣：

{
    /* Image values */
    mask: url(mask.png);                       /* 使用點陣圖來做遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 圖形中的形狀來做遮罩 */
}

當然，藉助圖片的方式其實比較繁瑣，因為我們首先還得準備相應的圖片素材，除了圖片，mask 還可以接受一個類似 background 的引數，也就是漸變。

類似如下使用方法：

{
    mask: linear-gradient(#000, transparent)                      /* 使用漸變來做遮罩 */
}

下面這樣一張圖片，疊加上一個從透明到黑色的漸變，

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

image

應用了 mask 之後，就會變成這樣：

image

這個 DEMO，可以先簡單瞭解到 mask 的基本用法。

這裡得到了使用 mask 最重要結論：圖片與 mask 生成的漸變的 transparent 的重疊部分，將會變得透明。

值得注意的是，上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)，這裡的 #fff 純色部分其實換成任意顏色都可以，不影響效果。

CodePen Demo -- 使用 MASK 的基本使用

利用 Mask 的其他一些小技巧

當然，掌握了 Mask 之後，可以玩出非常多花來。

譬如上述的國旗頭像，我們可以配合 CSS @property，實現一些有意思的 hover 效果：

或者利用 mask 實現一些趣味轉場效果：

甚至乎，彈幕網站的人物遮擋彈幕，都是利用 CSS mask 實現的：

如果你想深入瞭解 CSS MASK，不妨細細讀一下這兩篇文章：

最後

好了，本文到此結束，希望對你有幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ?

更多精彩 CSS 效果可以關注我的 CSS 靈感

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章