到國慶了，大家都急著給祖國母親慶生，
每年每到此時，微信朋友圈就會流行起給頭像裝飾上國旗，而今年又流行這款：
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);
}
應用了 mask 之后，就會變成這樣：
這個 DEMO，可以先簡單了解到 mask 的基本用法，
這里得到了使用 mask 最重要結論：圖片與 mask 生成的漸變的 transparent 的重疊部分，將會變得透明，
值得注意的是，上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)，這里的 #fff 純色部分其實換成任意顏色都可以，不影響效果，
CodePen Demo -- 使用 MASK 的基本使用
利用 Mask 的其他一些小技巧
當然，掌握了 Mask 之后，可以玩出非常多花來，
譬如上述的國旗頭像，我們可以配合 CSS @property，實作一些有意思的 hover 效果：
或者利用 mask 實作一些趣味轉場效果：
甚至乎，彈幕網站的人物遮擋彈幕，都是利用 CSS mask 實作的：
如果你想深入了解 CSS MASK，不妨細細讀一下這兩篇文章：
- 奇妙的 CSS MASK
- 使用 mask 實作視頻彈幕人物遮罩過濾
最后
好了，本文到此結束，希望對你有幫助 ??
更多精彩 CSS 效果可以關注我的 CSS 靈感
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/308408.html
標籤：其他
下一篇：節日禮物待簽收，開箱國慶頭像