今年國慶，大家都急著給祖國母親慶生！最火的莫過于頭像啦！

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

emm，很不錯(cuò)。

那么，將一張國旗圖片與我們的頭像，快速得到想要的頭像，使用 CSS 如何簡單實(shí)現(xiàn)呢？

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

在 CSS 中使用 mask 遮罩，一行代碼實(shí)現(xiàn)頭像與國旗的融合

在 CSS 中，我們僅僅需要將兩張圖片疊加在一起，對(duì)上層的圖片使用 mask 屬性，一行代碼即可實(shí)現(xiàn)該效果。

在上面的代碼中，我們利用了?div?和它的一個(gè)偽元素?div::after，實(shí)現(xiàn)了將頭像和國旗疊加在一起。

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

好了，本文到此結(jié)束，希望對(duì)你有幫助！快去試試吧！

雖然我是一位C/C++的博主，但也不妨礙我用前端知識(shí)給大家分享小技巧啦~

寫在最后：對(duì)于準(zhǔn)備成為一名優(yōu)秀程序員的朋友，如果你想更好的提升你的編程核心能力（內(nèi)功），讓自己成為一個(gè)具有真材實(shí)料的厲害的程序員，不妨從現(xiàn)在開始！C/C++，永不過時(shí)的編程語言~

微信公眾號(hào)：C語言編程學(xué)習(xí)基地

C語言零基礎(chǔ)入門教程（83集全）：https://www.bilibili.com/video/BV1yb4y197tm?spm_id_from=333.999.0.0

整理分享（多年學(xué)習(xí)的源碼、項(xiàng)目實(shí)戰(zhàn)視頻、項(xiàng)目筆記，基礎(chǔ)入門教程）

歡迎轉(zhuǎn)行和學(xué)習(xí)編程的伙伴，利用更多的資料學(xué)習(xí)成長比自己琢磨更快哦！