在 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)                      /* 使用渐变来做遮罩 */
}