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


Posted in HTML / CSS onOctober 24, 2021

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

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

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

emm,很不错。

那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何简单实现呢?

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

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

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

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

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

简单介绍下 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 一行代码实现头像与国旗的融合

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

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

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

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

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

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

利用 Mask 的其他一些小技巧

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

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

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

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

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

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

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

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

奇妙的 CSS MASK

使用 mask 实现视频弹幕人物遮罩过滤

到此这篇关于CSS 一行代码实现头像与国旗的融合的文章就介绍到这了,更多相关CSS头像与国旗融合内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
You might like
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php设计模式之单例模式代码
2016/06/11 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python分割文件的常用方法
2014/11/01 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python实现电子词典
2020/03/03 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python如何实现邮件功能
2020/05/27 Python
自我评价正确写法范文
2013/12/10 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
小学生开学感言
2014/02/28 职场文书
同学聚会策划方案
2014/06/06 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技