今天是国庆节，大家都在为庆祝祖国的生日而着急。每年这个时候，微信朋友圈都会流行用旗子装饰头像，今年又流行：

那么，如何通过将国旗图片与我们的头像结合来快速得到想要的头像，如何简单的用css实现呢？

有人认为是改变其中一张图片的透明度，其实不然。 仔细观察合成的头像，最左边的基本上只能看到红旗而看不到原来的头像内容，而最右边的只能看到头像，不再显示红旗的红色背景。

代码实现：

使用CSS中的遮罩，一行代码实现头像和国旗的融合，一行代码就可以实现这个效果。

<div class="mark"></div>
<style>
.mark{
    position: relative;
    margin: auto;
    width: 250px;
    height: 250px;
    background: url(img1) no-repeat;//头像
    background-size: cover;
}
.mark::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(img2) no-repeat;//国旗照片
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}
</style>

Mask的简单介绍

CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。

在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。

在过去，CSS mask属性在使用的时候就是mask: xxx，但是现在随着这个属性的规范化，mask属性实际上已经成为了诸多mask-*的缩写，这和background, border性质是一样的。
具体是哪些属性的缩写呢，可以参见下面的列表：

mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite

工具推荐

一键在线生成节日头像，包括：国庆节头像、圣诞节头像等，当然还支持自定义图片生成哦。

地址：点击进入

链接: https://fly63.com/article/detial/10679