跳转到内容
打开/关闭搜索
打开/关闭菜单
  • 5 条目
  • 2 文件
  • 8 用户
  • 777 编辑
ANACHRONISM
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Example:色卡标签：修订间差异

来自ANACHRONISM
更多操作
可视化wikitext
Ancimen​（留言 | 贡献）
行政员、​织界者、​策展人
770次编辑
创建页面，内容为“<div class="fx-hover-grow tag-clickable" data-link="{{{链接|位格}}}" style="position:relative;overflow:hidden;background:{{{背景色|#57000d}}};box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer;">{{#if:{{{图片|}}}|<div style="position:absolute;inset:0;z-index:0;">[[File:{{{图片}}}|100%|link=|class=tag-bg-img]]</div>|}}<div style="position:relative;z-index:1;padding:1.2em 1.5em;color:#fff;min-height:5em;display:flex;flex-direction:column;justify-…”
 
Ancimen​（留言 | 贡献）
行政员、​织界者、​策展人
770次编辑
小 Ancimen移动页面Example:色卡标签1至Example:色卡标签，不留重定向
 
（未显示同一用户的4个中间版本）
第1行： 第1行：
<div class="fx-hover-grow tag-clickable" data-link="{{{链接|[[位格]]}}}" style="position:relative;overflow:hidden;background:{{{背景色|#57000d}}};box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer;">{{#if:{{{图片|}}}|<div style="position:absolute;inset:0;z-index:0;">[[File:{{{图片}}}|100%|link=|class=tag-bg-img]]</div>|}}<div style="position:relative;z-index:1;padding:1.2em 1.5em;color:#fff;min-height:5em;display:flex;flex-direction:column;justify-content:center;"><span class="font-{{{水印字体|rubik}}}" style="position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:5em;font-weight:900;line-height:1;opacity:0.15;pointer-events:none;z-index:0;white-space:nowrap;">{{{水印|}}}</span><span style="display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;position:relative;z-index:1;"><span class="font-{{{标题字体|noto}}}" style="font-size:2.2em;font-weight:900;letter-spacing:0.02em;">{{{名称|}}}</span><span class="font-{{{英文标题字体|rubik}}}" style="font-size:0.95em;font-weight:bold;letter-spacing:0.35em;">{{{英文标题|}}}</span><span class="font-{{{装饰字体|rubik}}}" style="font-size:0.8em;font-weight:bold;letter-spacing:0.25em;">{{{装饰|}}}</span></span></div></div>
[[Template:色卡标签]]
 
一个支持图片/纯色背景、悬停放大与整块点击跳转的色卡标签组件。
 
==== 最简调用 ====
 
只传名称，其余使用默认值：
 
<pre>
{{色卡标签
| 名称 = 东方通合
}}
</pre>
 
效果：
 
{{色卡标签
| 名称 = 东方通合
}}
 
==== 完整调用示例 ====
 
<pre>
{{色卡标签
| 链接        = 东方通合
| 背景色      = #57000d
| 水印        = UNITE EAST
| 水印字体    = cinzel
| 名称        = 东方通合
| 标题字体    = noto
| 英文标题    = UNITE EAST
| 英文标题字体 = rubik
| 装饰        = ▼▼▼
| 装饰字体    = rubik
}}
</pre>
 
效果：
 
{{色卡标签
| 链接        = 东方通合
| 背景色      = #57000d
| 水印        = UNITE EAST
| 水印字体     = cinzel
| 名称        = 东方通合
| 标题字体    = noto
| 英文标题    = UNITE EAST
| 英文标题字体 = rubik
| 装饰        = ▼▼▼
| 装饰字体    = rubik
}}
 
==== 更换背景色 ====
 
<pre>
{{色卡标签
| 链接    = 万类天宥
| 背景色  = #0d2b3e
| 名称    = 万类天宥
| 英文标题 = MYRIAD
| 装饰    = ◆◆◆
}}
</pre>
 
效果：
 
{{色卡标签
| 链接    = 万类天宥
| 背景色  = #0d2b3e
| 名称    = 万类天宥
| 英文标题 = MYRIAD
| 装饰    = ◆◆◆
}}
 
==== 使用背景图片 ====
 
<pre>
{{色卡标签
| 链接  = 万类天宥
| 图片  = 占位图1.png
| 水印  = MYRIAD
| 名称   = 万类天宥
| 英文标题 = MYRIAD
}}
</pre>
 
效果：
 
{{色卡标签
| 链接  = 万类天宥
| 图片  = 占位图1.png
| 水印  = MYRIAD
| 名称  = 万类天宥
| 英文标题 = MYRIAD
}}
 
==== 参数说明 ====
 
{| class="wikitable"
! 参数 !! 可选值 !! 默认 !! 说明
|-
| 链接 || 任意页面名或完整 URL || 位格 || 点击卡片跳转的目标
|-
| 背景色 || 任意颜色值 || #57000d || 卡片底色，无图片时显示
|-
| 图片 || 文件名，含扩展名 || 空 || 卡片背景图，传图时铺满卡片并盖住背景色
|-
| 水印 || 任意文字 || 空 || 卡片左侧的大号浅色水印
|-
| 水印字体 || 字体类后缀，如 rubik、noto、cinzel、tesla、ballet、college、chrontor、mono || rubik || 水印字体
|-
| 名称 || 任意文字 || 空 || 中文主标题
|-
| 标题字体 || 字体类后缀 || noto || 中文主标题字体
|-
| 英文标题 || 任意文字 || 空 || 英文副标题
|-
| 英文标题字体 || 字体类后缀 || rubik || 英文副标题字体
|-
| 装饰 || 任意文字 || 空 || 主标题下方的装饰符号
|-
| 装饰字体 || 字体类后缀 || rubik || 装饰符号字体
|}
 
==== 注意事项 ====
 
* 卡片悬停时整体放大至 <code>1.08</code> 倍，由 <code>fx-hover-grow</code> 类实现。
* 有图片时图片铺满卡片并盖住背景色；无图片时显示背景色。
* 点击卡片任意位置均触发跳转，交互由覆盖整张卡片的隐藏链接实现，不需要 JS。
* 「链接」传页面名时跳转至对应 wiki 页面，传完整 URL 时跳转至外部网站。
* 卡片内容层设置了 <code>pointer-events:none</code>，确保点击穿透至链接层。
* 组件样式定义在 [[Template:色卡标签/styles.css]]。
* 字体类来自 [[MediaWiki:Citizen.css]]，详见 [[Example:字体调用]]。

2026年10月6日 (二) 17:42的最新版本

Template:色卡标签

一个支持图片/纯色背景、悬停放大与整块点击跳转的色卡标签组件。

最简调用

只传名称，其余使用默认值： 

{{色卡标签
| 名称 = 东方通合
}}

效果：

[[|​]]▣▣▣▣
东方通合

完整调用示例

{{色卡标签
| 链接         = 东方通合
| 背景色       = #57000d
| 水印         = UNITE EAST
| 水印字体     = cinzel
| 名称         = 东方通合
| 标题字体     = noto
| 英文标题     = UNITE EAST
| 英文标题字体 = rubik
| 装饰         = ▼▼▼
| 装饰字体     = rubik
}}

效果：

​▣▣▣▣
UNITE EAST东方通合UNITE EAST▼▼▼

更换背景色

{{色卡标签
| 链接     = 万类天宥
| 背景色   = #0d2b3e
| 名称     = 万类天宥
| 英文标题 = MYRIAD
| 装饰     = ◆◆◆
}}

效果：

​▣▣▣▣
万类天宥MYRIAD◆◆◆

使用背景图片

{{色卡标签
| 链接   = 万类天宥
| 图片   = 占位图1.png
| 水印   = MYRIAD
| 名称   = 万类天宥
| 英文标题 = MYRIAD
}}

效果：

​▣▣▣▣
MYRIAD万类天宥MYRIAD

参数说明

参数 可选值 默认 说明
链接 任意页面名或完整 URL 位格 点击卡片跳转的目标
背景色 任意颜色值 #57000d 卡片底色，无图片时显示
图片 文件名，含扩展名 空 卡片背景图，传图时铺满卡片并盖住背景色
水印 任意文字 空 卡片左侧的大号浅色水印
水印字体 字体类后缀，如 rubik、noto、cinzel、tesla、ballet、college、chrontor、mono rubik 水印字体
名称 任意文字 空 中文主标题
标题字体 字体类后缀 noto 中文主标题字体
英文标题 任意文字 空 英文副标题
英文标题字体 字体类后缀 rubik 英文副标题字体
装饰 任意文字 空 主标题下方的装饰符号
装饰字体 字体类后缀 rubik 装饰符号字体

注意事项

  • 卡片悬停时整体放大至 1.08 倍，由 fx-hover-grow 类实现。
  • 有图片时图片铺满卡片并盖住背景色；无图片时显示背景色。
  • 点击卡片任意位置均触发跳转，交互由覆盖整张卡片的隐藏链接实现，不需要 JS。
  • 「链接」传页面名时跳转至对应 wiki 页面，传完整 URL 时跳转至外部网站。
  • 卡片内容层设置了 pointer-events:none，确保点击穿透至链接层。
  • 组件样式定义在 Template:色卡标签/styles.css。
  • 字体类来自 MediaWiki:Citizen.css，详见 Example:字体调用。
检索自“https://anachronism.top/index.php?title=Example:色卡标签&oldid=746”
最后修改时间
此页面最后编辑于2026年10月6日 (星期二) 17:42。