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打造属于自己的“小黄人”
Mar 14 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
You might like
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python中元类用法实例
2014/10/10 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python3实现弹弹球小游戏
2019/11/25 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
一份Java笔试题
2012/02/21 面试题
请解释流与文件有什么不同
2016/07/29 面试题
《分一分》教学反思
2014/04/13 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2014年采购部工作总结
2014/11/20 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
python中urllib包的网络请求教程
2022/04/19 Python