CSS一行代码实现渐变头像
CSS一行代码实现渐变头像
这里只能用星星代替刷爆你朋友圈的头像了
简述：第一思路分析得到这是两张图片合并而成的，头像在下星星覆盖在上，星星的透明度放低，如同PS中的透明度和混合模式，但你仔细观察会发现，合成好的头像左侧颜色较深 ，右侧透明度明显高于左侧，如同ps中的渐变，巧的是CSS与生俱来就有（开玩笑C3才有），现在需要考虑的问题是怎么将星星图片渐变。
使用mask遮罩属性 配合 linear-gradient渐变属性完美实现
准备素材
- 两张图片 头像在下 遮罩的星星在上
代码实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;position: relative;margin: 100px auto;background: url(iu.jpg) no-repeat; /* 原始头像 */background-size: cover;}div::after {content: "";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url(gq.png) no-repeat; /*星星*/background-size: cover;/* 核心代码 */-webkit-mask: linear-gradient(100deg, #000 10%, transparent 70%)}</style>
</head><body><div></div>
</body></html>
效果演示
mask：mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
linera-gradient 线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
当前设置的颜色 第一个为黑色 第二个为透明 由黑到透明过渡 但实则不是这样的 你随意的改变黑色的颜色 此时都不会呈现出其他颜色
其中的百分数是控制遮罩的范围大小以及透明度 数值越大遮罩范围越大，但透明度越低。
只能用星星代替红色的哪张了别问问就是过不了
过多的细则不多描述 请移步官方文档：
CSS3渐变属性：CSS3渐变_MDN官方文档
mask属性 mask属性_MDN官方文档
CSS一行代码实现渐变头像
CSS一行代码实现渐变头像
这里只能用星星代替刷爆你朋友圈的头像了
简述：第一思路分析得到这是两张图片合并而成的，头像在下星星覆盖在上，星星的透明度放低，如同PS中的透明度和混合模式，但你仔细观察会发现，合成好的头像左侧颜色较深 ，右侧透明度明显高于左侧，如同ps中的渐变，巧的是CSS与生俱来就有（开玩笑C3才有），现在需要考虑的问题是怎么将星星图片渐变。
使用mask遮罩属性 配合 linear-gradient渐变属性完美实现
准备素材
- 两张图片 头像在下 遮罩的星星在上
代码实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;position: relative;margin: 100px auto;background: url(iu.jpg) no-repeat; /* 原始头像 */background-size: cover;}div::after {content: "";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url(gq.png) no-repeat; /*星星*/background-size: cover;/* 核心代码 */-webkit-mask: linear-gradient(100deg, #000 10%, transparent 70%)}</style>
</head><body><div></div>
</body></html>
效果演示
mask：mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
linera-gradient 线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
当前设置的颜色 第一个为黑色 第二个为透明 由黑到透明过渡 但实则不是这样的 你随意的改变黑色的颜色 此时都不会呈现出其他颜色
其中的百分数是控制遮罩的范围大小以及透明度 数值越大遮罩范围越大，但透明度越低。
只能用星星代替红色的哪张了别问问就是过不了
过多的细则不多描述 请移步官方文档：
CSS3渐变属性：CSS3渐变_MDN官方文档
mask属性 mask属性_MDN官方文档