[已解决]github图片

琅琊王朝 · 发表于 2023-10-4 21:34:46

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

https://camo.githubusercontent.com/38addf36de1adf564c9a5ac099668238564ce3065487df2aa3491356ef040a22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545362539422542342545362539362542302545362539372542362545392539372542342d323032332545352542392542343325453625394325383832332545362539372541352d6c6967687467726579

怎么获取像上面的图片风格的按钮？
我访问https://camo.githubusercontent.com/给我整出来个404

最佳答案

月排行榜 / 总排行榜

TKXZ

2023-10-21 20:16:13

琅琊王朝发表于 2023-10-21 17:49
怎么填写内容？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: inline-block;
position: relative;
font-size: 12px;
color: #fff;
text-align: center;
}
.box img {
vertical-align: middle;
}
.box .subbox {
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.box .tag {
display: inline-block;
width: 37%;
left: 0;
}
.box .tag__content {
display: inline-block;
width: 63%;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
alt="">
<span class="tag subbox">访问时间</span>
<span class="tag__content subbox">2023-10-24</span>
</div>
</body>
</html>

复制代码

写一些CSS就可以啦

跳转到最佳答案楼层

琅琊王朝 · 发表于 2023-10-5 12:10:30

歌者文明清理员发表于 2023-10-4 23:15
https://www.runoob.com/svg/svg-inhtml.html

额我知道怎么插入，我要的是这个svg

琅琊王朝 · 发表于 2023-10-21 15:43:44

Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源

最后console.log中输出的就是可用的svg的DataURI

???

琅琊王朝 · 发表于 2023-10-21 17:28:28

Darth_EF 发表于 2023-10-21 15:47
?

看不懂

我太弱了

琅琊王朝 · 发表于 2023-10-21 17:49:27

TKXZ 发表于 2023-10-21 17:42
将svg转为base64格式,而不是链接，我设置了img宽度高度，这个你可以自己设定其他值，代码直接可以使用

怎么填写内容？

账号		自动登录	找回密码
密码			立即注册