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

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

emm，很不錯(cuò)。

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

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

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

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

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;
    // 國(guó)旗圖片
    background: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

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

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

簡(jiǎn)單介紹下 Mask

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

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

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

當(dāng)然，借助圖片的方式其實(shí)比較繁瑣，因?yàn)槲覀兪紫冗€得準(zhǔn)備相應(yīng)的圖片素材，除了圖片，mask 還可以接受一個(gè)類似 background 的參數(shù)，也就是漸變。

類似如下使用方法：

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

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

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

應(yīng)用了 mask 之后，就會(huì)變成這樣：

這個(gè) DEMO，可以先簡(jiǎn)單了解到 mask 的基本用法。

這里得到了使用 mask 最重要結(jié)論：圖片與 mask 生成的漸變的 transparent 的重疊部分，將會(huì)變得透明。

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

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

利用 Mask 的其他一些小技巧

當(dāng)然，掌握了 Mask 之后，可以玩出非常多花來。

譬如上述的國(guó)旗頭像，我們可以配合 CSS @property，實(shí)現(xiàn)一些有意思的 hover 效果：

或者利用 mask 實(shí)現(xiàn)一些趣味轉(zhuǎn)場(chǎng)效果：

甚至乎，彈幕網(wǎng)站的人物遮擋彈幕，都是利用 CSS mask 實(shí)現(xiàn)的：

如果你想深入了解 CSS MASK，不妨細(xì)細(xì)讀一下這兩篇文章：

奇妙的 CSS MASK

使用 mask 實(shí)現(xiàn)視頻彈幕人物遮罩過濾

到此這篇關(guān)于CSS 一行代碼實(shí)現(xiàn)頭像與國(guó)旗的融合的文章就介紹到這了,更多相關(guān)CSS頭像與國(guó)旗融合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論