CSS一行代码实现头像与国旗的融合代码实例

本篇文章小编给大家分享一下CSS一行代码实现头像与国旗的融合代码实例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

效果图

在 CSS 中使用 mask 遮罩，一行代码实现头像与国旗的融合

在 CSS 中，我们仅仅需要将两张图片叠加在一起，对上层的图片使用 mask 属性，一行代码即可实现该效果。

css;">div {
    position: relative;
    margin: auto;
    
    
    // 正常头像
    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纯色部分其实换成任意颜色都可以，不影响效果。