Example:图片交互链接

Template:图片交换链接/styles.css
Template:图片交换链接
一个悬停时表图淡出、里图淡入的图片交换组件，支持尺寸、过渡时长、底色、文字颜色与字体自定义。

最简调用

只传图片与文字，其余使用默认值：

{{图片交换链接
| 表   = 占位图1.png
| 里   = 占位图1.png
| 文本 = 这是一段文字
}}

效果：

这是一段文字

完整调用示例

{{图片交换链接
| 尺寸     = 10
| 过渡时长 = 0.5
| 表底色   = #99000e
| 里底色   = #1a0006
| 文字颜色 = #ffffff
| 字体     = yahei
| 表       = 占位图1.png
| 里       = 占位图1.png
| 文本     = 这是一段文字
}}

效果：

这是一段文字

参数说明

参数	可选值	默认	说明
尺寸	任意数字	10	卡片边长，单位 em，只写数字，始终为正方形
过渡时长	任意数字	0.5	悬停过渡时长，单位秒，只写数字
表底色	任意颜色值	#99000e	表图片下方的背景色，用于填充透明 PNG 的透明区域
里底色	任意颜色值	无	里图片下方的背景色，不传则透明
文字颜色	任意颜色值	无	文本颜色，不传则继承页面文字色
字体	字体类后缀，如 yahei、rubik、milton、narrow、seldom、script、rogue、anurati、mono	无	文本字体，不传则走全站默认字体
表	文件名，含扩展名	占位图1.png	默认状态显示的图片
里	文件名，含扩展名	占位图1.png	悬停后显示的图片
文本	任意文字，可含链接	这是一段文字	内容层文本，支持链接

注意事项

• 桌面端鼠标悬停时，表图片与表底色作为整体淡出，内容层淡入；移动端因无悬停能力，直接显示内容层。
• 卡片始终为正方形，宽高由「尺寸」参数统一控制。
• 表底色与里底色用于填充透明 PNG 的透明区域；不传时该区域透明，露出下层或页面底色。
• 文本使用 z-index:1 覆盖在里图片之上，避免被图片遮挡。
• 字体类来自 MediaWiki:Citizen.css，详见 Example:字体调用。