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 object-fit属性
Jul 27 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
You might like
COM in PHP (winows only)
2006/10/09 PHP
PHP开发框架总结收藏
2008/04/24 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
Javascript 按位与运算符 (&)使用介绍
2014/02/04 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
微信小程序工具函数封装
2019/10/28 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
python if not in 多条件判断代码
2016/09/21 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
护理专业个人求职简历的自我评价
2013/10/13 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
企业管理标语
2014/06/10 职场文书
评先进个人材料
2014/12/29 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
拉贝日记观后感
2015/06/05 职场文书
运动员代表致辞
2015/07/29 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
JS实现扫雷项目总结
2021/05/19 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Flink 侧流输出源码示例解析
2022/09/23 Servers