让Gravatar头像默认为字母头像
默认 字母 头像 Gravatar
2023-06-13 09:18:40 时间
上篇文章《使用PHP通过svg生成base64文字首字头像》讲到了如何给昵称生成首字头像,那么如何让Gravatar头像默认为字母头像呢?(为了演示方便下文中Gravatar头像地址将使用Cravatar来演示) Gravatar头像参数d
一般Gravatar头像地址为https://cravatar.cn/avatar/26f91984f0b683078b491fa5f28bbc70?s=40&d=mm
,可以看到末尾有个d=mm
,mm
就是其参数,参数具体如下。
404:如果没有与电子邮件哈希关联的图像,则不加载任何图像,而是返回 HTTP 404(未找到文件)响应
mm:一个简单的卡通风格的人物轮廓
identicon:一个几何图案(随机生成)
monsterid:具有不同颜色、面孔的“怪物”(随机生成)
wavatar:具有不同特征和背景的人脸(随机生成)
retro:8位色的像素人脸(随机生成)
robohash:具有不同颜色、面部的机器人(随机生成)
blank:透明的 PNG 图像(为方便演示,已为其添加了一个边框)
其实d
也可以设置一个图片地址比如d=图片url
,但这样设置的效率极低,同时很多国内头像源并不支持,比如Cravatar
就不支持。
那么如何解决呢?
利用blank参数
其实可以利用blank参数,将默认头像设置为透明,然后再头像下面在叠加个头像上去,类似于Photoshop的图层,邮箱头像图层在上,字母头像图层在下,用户没有邮箱头像时则显示透明的默认头像,然后因为是透明的,所以咱们看到的就是字母头像了,实例代码如下:
html部分
<div class="zetx">
<img class="avatar a" src="//cravatar.cn/avatar/26f91984f0b683078b491fa5f28bbc70?s=40&d=blank" alt="Calm" width="40" height="40">
<img class="avatar b" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigyMjksMTYwLDE2NikiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgYWxpZ25tZW50LWJhc2VsaW5lPSJjZW50cmFsIj5DPC90ZXh0Pjwvc3ZnPg==" alt="Calm" width="40" height="40">
</div>
css部分
.zetx{
position: relative;
display: inline-block;
}
.zetx .a{
position: relative;
z-index: 2;
}
.zetx .b{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
linkCard('.post-content','0');
相关文章
- 谷歌浏览器设置地址栏默认搜索为百度搜索
- Redis 修改默认端口号 修改配置文件 redis.windows.conf[通俗易懂]
- linux系统添加静态路由命令_静态路由和默认路由小结
- Perl项目中的面向对象、继承默认加载和正则表达式的使用方法
- Java用户线程和守护线程,线程默认Daemon值是false吗?
- 如何在 Linux 中更改默认 ssh 端口 22?
- Linux中增加默认路由的方法(linux增加默认路由)
- 遇见Oracle:默认编码密码的安全之旅(oracle默认编码)
- Fedora 25 将是第一个默认采用 Wayland 显示服务器的发行版
- 更改MSSQL默认端口:一步一步指导(更改mssql的默认端口)
- 『SQL Server默认库:保持数据安全』(sqlserver默认库)
- 从Redis到多个库探索默认情况下的数量(redis 默认多少个库)
- 谨慎配置Redis的默认内存上限(redis默认内存限制)
- 响应对象错误'ASP0185:80020003'缺少默认属性