共计 1726 个字符，预计需要花费 5 分钟才能阅读完成。
到国庆了，大家都急着给祖国母亲庆生。
每年每到此时，微信朋友圈就会风行起给头像装璜上国旗，而往年又风行这款：
emm，很不错。
那么，将一张国旗图片与咱们的头像，疾速失去想要的头像，应用 CSS 如何简略实现呢？
有人认为是扭转其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最右边的基本上只能看到红旗看不到本来的头像内容，而最左边根本只能看到头像而不再显示红旗的红色背景。
在 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) /* 应用突变来做遮罩 */
}上面这样一张图片，叠加上一个从通明到彩色的突变，
{background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #fff);
}
利用了 mask 之后，就会变成这样：
这个 DEMO，能够先简略理解到 mask 的根本用法。
这里失去了应用 mask 最重要论断：图片与 mask 生成的突变的 transparent 的重叠局部，将会变得通明。
值得注意的是，下面的突变应用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff 纯色局部其实换成任意色彩都能够，不影响成果。
CodePen Demo — 应用 MASK 的根本应用
利用 Mask 的其余一些小技巧
当然，把握了 Mask 之后，能够玩出十分多花来。
譬如上述的国旗头像，咱们能够配合 CSS @property，实现一些有意思的 hover 成果：
或者利用 mask 实现一些趣味转场成果：
甚至乎，弹幕网站的人物遮挡弹幕，都是 利用 CSS mask 实现的：
如果你想深刻理解 CSS MASK，无妨细细读一下这两篇文章：
- 微妙的 CSS MASK
- 应用 mask 实现视频弹幕人物遮罩过滤
最初
好了，本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 成果能够关注我的 CSS 灵感
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
