旺球体育在线利用css一行代码实现头像与国旗的融合

时间:?2021-10-02阅读:?74标签:?css

今天是国庆节,大家都在为庆祝祖国的生日而着急。每年这个时候,微信朋友圈都会流行用旗子装饰头像,今年又流行:


那么,如何通过将国旗图片与我们的头像结合来快速得到想要的头像,如何简单的用css实现呢?

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


代码实现:

使用css中的遮罩,一行代码实现头像和国旗的融合,一行代码就可以实现这个效果。

<div class="mark"></div>
<style>
.mark{
position: relative;
margin: auto;
width: 250px;
height: 250px;
background: url(img1) no-repeat;//头像
background-size: cover;
}
.mark::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(img2) no-repeat;//国旗照片
background-size: cover;
mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}
</style>


Mask的简单介绍

CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。

在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。其实 mask 的出现已经有一段时间了,只是没有特别多实用的场景,在实战中使用的非常少,本文将罗列一些使用 mask 创造出来的有意思的场景。

在过去,CSS mask属性在使用的时候就是mask: xxx,但是现在随着这个属性的规范化,mask属性实际上已经成为了诸多mask-*的缩写,这和background, border性质是一样的。
具体是哪些属性的缩写呢,可以参见下面的列表:

mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10679

工作中常用且容易遗忘的css样式整理,建议收藏

单行文本的溢出显示省略号(一定要有宽度),中英文自动换行,设置placeholder的字体样式,不固定高宽 div 垂直居中的方法,IOS 页面滑动卡顿,设置滚动条样式

什么是css sprites(雪碧图),css sprites使用的优缺点

css sprites雪碧图:把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片,背景图是否重复,背景图定位),显示图片,减轻服务器对图片的请求数量

css中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

css实用小技巧_css常用技巧和经验总汇

这篇文章整理了一些css常用技巧和经验总汇,包括:如何清除图片下方出现几像素的空白间隙?如何让文本垂直对齐文本输入框?如何让单行文本在容器内垂直居中?为什么Standard mode下IE无法设置滚动条的颜色?

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一,float:left/right 或者 position: absolute 后还写上 display:block?二,认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

20个常用的CSS知识点

如何隐藏滚动条,修改滚动条样式,修改input框placeholder的颜色,按钮不可点击的样式,CSS鼠标指针事件:阻止任何JS事件,文字超出强制n行 超出部分用省略号代替,修改字体间距

css完美解决网页在iphoneX的头部刘海显示问题

css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海

原来 CSS 这样写是会让 App 崩溃的

之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击,当时有朋友跟我说,让我去获取那个网站的 cookie,再然后进入那个网站的后台去玩。然而,技术能力实在有限,搞不了这些东西

为什么Web开发人员不用最新的CSS功能

尽管CSS每年都会发布全新的特性,但实际上这些新功能很少会被web开发人员实际在生产项目中使用到,甚至去了解它们的动力也不会比去多完成几个需求更多。那究竟是什么原因导致的呢?

CSS中的一些细节

当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu