CSS 小技巧 | 一行代码实现头像与国旗的融合

简介: CSS 小技巧 | 一行代码实现头像与国旗的融合

到国庆了,大家都急着给祖国母亲庆生。

每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款:


50a0a60f2d514a2b8a34c6aeae267d91_tplv-k3u1fbpfcp-zoom-1.png


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),我们就可以实现头像与国旗的巧妙叠:

5f57e39d99ef4eb680110bccf5a00f5a_tplv-k3u1fbpfcp-zoom-1.gif


简单介绍下 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);
}
CSS 复制 全屏


012aa97a8c5348a9be59b2ed6293536d_tplv-k3u1fbpfcp-zoom-1.png


应用了 mask 之后,就会变成这样:

49749bbd25ad44f7992383559fb3e56c_tplv-k3u1fbpfcp-zoom-1.png

这个 DEMO,可以先简单了解到 mask 的基本用法。


这里得到了使用 mask 最重要结论:图片与 mask 生成的渐变的 transparent 的重叠部分,将会变得透明。


值得注意的是,上面的渐变使用的是 linear-gradient(90deg, transparent, #fff),这里的 #fff 纯色部分其实换成任意颜色都可以,不影响效果。


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


利用 Mask 的其他一些小技巧



当然,掌握了 Mask 之后,可以玩出非常多花来。

譬如上述的国旗头像,我们可以配合 CSS @property,实现一些有意思的 hover 效果:

image.gif


或者利用 mask 实现一些趣味转场效果:


image.gif


甚至乎,弹幕网站的人物遮挡弹幕,都是利用 CSS mask 实现的:


image.png


如果你想深入了解 CSS MASK,不妨细细读一下这两篇文章:



目录
相关文章
|
7月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
242 4
|
1月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
36 6
|
1月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
23 2
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
111 6
|
7月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
61 0
|
4月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
60 1
简单几行代码CSS实现网页自动打文字效果
|
4月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
4月前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
|
6月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
60 5
|
5月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
83 0