设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › github图片
返回列表 发新帖
查看: 533|回复: 13

[已解决]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
怎么填写内容？

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             display: inline-block;
  11.             position: relative;
  12.             font-size: 12px;
  13.             color: #fff;
  14.             text-align: center;
  15.         }

  17.         .box img {
  18.             vertical-align: middle;
  19.         }

  21.         .box .subbox {
  22.             position: absolute;
  23.             top: 50%;
  24.             transform: translate3d(0, -50%, 0);
  25.         }

  27.         .box .tag {
  28.             display: inline-block;
  29.             width: 37%;
  30.             left: 0;
  31.         }

  33.         .box .tag__content {
  34.             display: inline-block;
  35.             width: 63%;
  36.             right: 0;
  37.         }
  38.     </style>
  39. </head>

  41. <body>
  42.     <div class="box">
  43.         <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
  44.             alt="">
  45.         <span class="tag subbox">访问时间</span>
  46.         <span class="tag__content subbox">2023-10-24</span>
  47.     </div>
  48. </body>

  50. </html>
复制代码


写一些CSS就可以啦
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2023-10-4 21:35:08 | 显示全部楼层
这种图片风格的按钮是通过使用SVG（可缩放矢量图形）来实现的。SVG是一种基于XML的图像格式，可以在不失真的情况下缩放。要使用这种图片风格的按钮，您可以使用以下步骤：

1. 在您的HTML文件中添加一个SVG元素。例如：

  
  1.    <svg width="200" height="50">
  2.      <rect x="0" y="0" width="200" height="50" rx="25" ry="25" style="fill:#E6B22D;stroke-width:2;stroke:#E6B22D" />
  3.      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="#FFFFFF">按钮</text>
  4.    </svg>
  5.    
复制代码


   在这个例子中，我们使用 <rect> 元素创建一个矩形，使用 rx 和 ry 属性来设置矩形的圆角半径，使用 fill 属性来设置矩形的填充颜色，使用 stroke-width 和 stroke 属性来设置矩形的边框颜色和宽度。我们还使用 <text> 元素添加了一个文本标签，用于在按钮上显示文本。

2. 您可以使用CSS样式来自定义SVG元素。例如：

  
  1.    svg {
  2.      cursor: pointer;
  3.      transition: all 0.2s ease-in-out;
  4.    }
  5.    
  6.    svg:hover rect {
  7.      fill: #F5A623;
  8.      stroke: #F5A623;
  9.    }
  10.    
  11.    svg:hover text {
  12.      fill: #FFFFFF;
  13.    }
  14.    
复制代码


   在这个例子中，我们使用CSS样式来设置鼠标指针的样式，并添加了一个过渡效果。我们还使用 :hover 伪类来设置鼠标悬停时的样式。

请注意，您需要将SVG代码嵌入到HTML文件中或将其作为单独的文件引用，而不是使用图像URL来获取SVG。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

歌者文明清理员
发表于 2023-10-4 23:15:39 | 显示全部楼层
https://www.runoob.com/svg/svg-inhtml.html
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

琅琊王朝
 楼主| 发表于 2023-10-5 12:10:30 | 显示全部楼层
歌者文明清理员 发表于 2023-10-4 23:15
https://www.runoob.com/svg/svg-inhtml.html

额我知道怎么插入，我要的是这个svg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Darth_EF
发表于 2023-10-21 15:39:53 | 显示全部楼层
可以使用DataURI作为你的图形资源
  1. /**
  2. * 创建 时间展示 svg内容
  3. * @param {Date} date
  4. * @returns {string} 返回svg内容
  5. */
  6. function create_SVG__DateView(date){
  7.     var date_str=`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
  8.     // 此处svg内容源自提问中的链接 : https://camo.githubusercontent.com/38addf36de1adf564c9a5ac099668238564ce3065487df2aa3491356ef040a22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545362539422542342545362539362542302545362539372542362545392539372542342d323032332545352542392542343325453625394325383832332545362539372541352d6c6967687467726579
  9.     return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20" role="img" aria-label="更新时间: ${date_str}"><title>更新时间: ${date_str}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="55" height="20" fill="#555"/><rect x="55" width="91" height="20" fill="#9f9f9f"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="285" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">更新时间</text><text x="285" y="140" transform="scale(.1)" fill="#fff" textLength="450">更新时间</text><text aria-hidden="true" x="995" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="810">${date_str}</text><text x="995" y="140" transform="scale(.1)" fill="#fff" textLength="810">${date_str}</text></g></svg>`;
  10. }

  12. // 字符串转base64
  13. function b64EncodeUnicode(str) {
  14.     return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
  15.         return String.fromCharCode('0x' + p1);
  16.     }));
  17. }

  19. /** 创建 data URI
  20. * @param {string} head 文件类型头   
  21. * @param {string} data 原文数据
  22. */
  23. function create_DataURI(head,data){ return `data:${head};base64,`+b64EncodeUnicode(data); }

  25. // svg文件的DataURI头为  "image/svg+xml"
  26. console.log(create_DataURI("image/svg+xml", create_SVG__DateView(new Date(Date.now()))));
复制代码

最后console.log中输出的就是可用的svg的DataURI
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Darth_EF
发表于 2023-10-21 15:41:19 | 显示全部楼层
Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源

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

这是我刚才执行这段代码后得到的输出, 直接可以当成svg资源使用
data:image/svg+xml;base64,JTNDc3ZnJTIweG1sbnM9JTIyaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmclMjIlMjB4bWxuczp4bGluaz0lMjJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJTIyJTIwd2lkdGg9JTIyMTQ2JTIyJTIwaGVpZ2h0PSUyMjIwJTIyJTIwcm9sZT0lMjJpbWclMjIlMjBhcmlhLWxhYmVsPSUyMiVFNiU5QiVCNCVFNiU5NiVCMCVFNiU5NyVCNiVFOSU5NyVCNDolMjAyMDIzJUU1JUI5JUI0MyVFNiU5QyU4ODIzJUU2JTk3JUE1JTIyJTNFJTNDdGl0bGUlM0UlRTYlOUIlQjQlRTYlOTYlQjAlRTYlOTclQjYlRTklOTclQjQ6JTIwMjAyMyVFNSVCOSVCNDMlRTYlOUMlODgyMyVFNiU5NyVBNSUzQy90aXRsZSUzRSUzQ2xpbmVhckdyYWRpZW50JTIwaWQ9JTIycyUyMiUyMHgyPSUyMjAlMjIlMjB5Mj0lMjIxMDAlMjUlMjIlM0UlM0NzdG9wJTIwb2Zmc2V0PSUyMjAlMjIlMjBzdG9wLWNvbG9yPSUyMiNiYmIlMjIlMjBzdG9wLW9wYWNpdHk9JTIyLjElMjIvJTNFJTNDc3RvcCUyMG9mZnNldD0lMjIxJTIyJTIwc3RvcC1vcGFjaXR5PSUyMi4xJTIyLyUzRSUzQy9saW5lYXJHcmFkaWVudCUzRSUzQ2NsaXBQYXRoJTIwaWQ9JTIyciUyMiUzRSUzQ3JlY3QlMjB3aWR0aD0lMjIxNDYlMjIlMjBoZWlnaHQ9JTIyMjAlMjIlMjByeD0lMjIzJTIyJTIwZmlsbD0lMjIjZmZmJTIyLyUzRSUzQy9jbGlwUGF0aCUzRSUzQ2clMjBjbGlwLXBhdGg9JTIydXJsKCNyKSUyMiUzRSUzQ3JlY3QlMjB3aWR0aD0lMjI1NSUyMiUyMGhlaWdodD0lMjIyMCUyMiUyMGZpbGw9JTIyIzU1NSUyMi8lM0UlM0NyZWN0JTIweD0lMjI1NSUyMiUyMHdpZHRoPSUyMjkxJTIyJTIwaGVpZ2h0PSUyMjIwJTIyJTIwZmlsbD0lMjIjOWY5ZjlmJTIyLyUzRSUzQ3JlY3QlMjB3aWR0aD0lMjIxNDYlMjIlMjBoZWlnaHQ9JTIyMjAlMjIlMjBmaWxsPSUyMnVybCgjcyklMjIvJTNFJTNDL2clM0UlM0NnJTIwZmlsbD0lMjIjZmZmJTIyJTIwdGV4dC1hbmNob3I9JTIybWlkZGxlJTIyJTIwZm9udC1mYW1pbHk9JTIyVmVyZGFuYSxHZW5ldmEsRGVqYVZ1JTIwU2FucyxzYW5zLXNlcmlmJTIyJTIwdGV4dC1yZW5kZXJpbmc9JTIyZ2VvbWV0cmljUHJlY2lzaW9uJTIyJTIwZm9udC1zaXplPSUyMjExMCUyMiUzRSUzQ3RleHQlMjBhcmlhLWhpZGRlbj0lMjJ0cnVlJTIyJTIweD0lMjIyODUlMjIlMjB5PSUyMjE1MCUyMiUyMGZpbGw9JTIyIzAxMDEwMSUyMiUyMGZpbGwtb3BhY2l0eT0lMjIuMyUyMiUyMHRyYW5zZm9ybT0lMjJzY2FsZSguMSklMjIlMjB0ZXh0TGVuZ3RoPSUyMjQ1MCUyMiUzRSVFNiU5QiVCNCVFNiU5NiVCMCVFNiU5NyVCNiVFOSU5NyVCNCUzQy90ZXh0JTNFJTNDdGV4dCUyMHg9JTIyMjg1JTIyJTIweT0lMjIxNDAlMjIlMjB0cmFuc2Zvcm09JTIyc2NhbGUoLjEpJTIyJTIwZmlsbD0lMjIjZmZmJTIyJTIwdGV4dExlbmd0aD0lMjI0NTAlMjIlM0UlRTYlOUIlQjQlRTYlOTYlQjAlRTYlOTclQjYlRTklOTclQjQlM0MvdGV4dCUzRSUzQ3RleHQlMjBhcmlhLWhpZGRlbj0lMjJ0cnVlJTIyJTIweD0lMjI5OTUlMjIlMjB5PSUyMjE1MCUyMiUyMGZpbGw9JTIyIzAxMDEwMSUyMiUyMGZpbGwtb3BhY2l0eT0lMjIuMyUyMiUyMHRyYW5zZm9ybT0lMjJzY2FsZSguMSklMjIlMjB0ZXh0TGVuZ3RoPSUyMjgxMCUyMiUzRTIwMjMlRTUlQjklQjQzJUU2JTlDJTg4MjMlRTYlOTclQTUlM0MvdGV4dCUzRSUzQ3RleHQlMjB4PSUyMjk5NSUyMiUyMHk9JTIyMTQwJTIyJTIwdHJhbnNmb3JtPSUyMnNjYWxlKC4xKSUyMiUyMGZpbGw9JTIyI2ZmZiUyMiUyMHRleHRMZW5ndGg9JTIyODEwJTIyJTNFMjAyMyVFNSVCOSVCNDMlRTYlOUMlODgyMyVFNiU5NyVBNSUzQy90ZXh0JTNFJTNDL2clM0UlM0Mvc3ZnJTNF
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

琅琊王朝
 楼主| 发表于 2023-10-21 15:43:44 | 显示全部楼层
Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源

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

???
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Darth_EF
发表于 2023-10-21 15:47:38 | 显示全部楼层
琅琊王朝 发表于 2023-10-21 15:43
???

?
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

琅琊王朝
 楼主| 发表于 2023-10-21 17:28:28 | 显示全部楼层
Darth_EF 发表于 2023-10-21 15:47
?

看  不  懂

我太弱了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

TKXZ
发表于 2023-10-21 17:40:41 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         img {
  10.             width: 140px;
  11.             height: 20px;
  12.         }
  13.     </style>
  14. </head>

  16. <body>
  17.     <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
  18.         alt="">
  19. </body>

  21. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

TKXZ
发表于 2023-10-21 17:42:13 | 显示全部楼层
TKXZ 发表于 2023-10-21 17:40

将svg转为base64格式,而不是链接，我设置了img宽度高度， 这个你可以自己设定其他值， 代码直接可以使用
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

琅琊王朝
 楼主| 发表于 2023-10-21 17:49:27 | 显示全部楼层
TKXZ 发表于 2023-10-21 17:42
将svg转为base64格式,而不是链接，我设置了img宽度高度， 这个你可以自己设定其他值， 代码直接可以使用

怎么填写内容？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Darth_EF
发表于 2023-10-21 18:00:30 | 显示全部楼层
琅琊王朝 发表于 2023-10-21 17:49
怎么填写内容？

运行5楼我那些js代码，然后会输出一段DataURI的连接，然后像10楼那样把DataURI放到img里或者用background-image，就能显示svg内容


                               
登录/注册后可看大图


                               
登录/注册后可看大图


                               
登录/注册后可看大图
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

TKXZ
发表于 2023-10-21 20:16:13 | 显示全部楼层    本楼为最佳答案   
琅琊王朝 发表于 2023-10-21 17:49
怎么填写内容？

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             display: inline-block;
  11.             position: relative;
  12.             font-size: 12px;
  13.             color: #fff;
  14.             text-align: center;
  15.         }

  17.         .box img {
  18.             vertical-align: middle;
  19.         }

  21.         .box .subbox {
  22.             position: absolute;
  23.             top: 50%;
  24.             transform: translate3d(0, -50%, 0);
  25.         }

  27.         .box .tag {
  28.             display: inline-block;
  29.             width: 37%;
  30.             left: 0;
  31.         }

  33.         .box .tag__content {
  34.             display: inline-block;
  35.             width: 63%;
  36.             right: 0;
  37.         }
  38.     </style>
  39. </head>

  41. <body>
  42.     <div class="box">
  43.         <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
  44.             alt="">
  45.         <span class="tag subbox">访问时间</span>
  46.         <span class="tag__content subbox">2023-10-24</span>
  47.     </div>
  48. </body>

  50. </html>
复制代码


写一些CSS就可以啦
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-2 01:29

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表