为Anki汉字笔顺图添加背景网格的技术求助

一、实现效果 #

给每个笔顺图添加白色背景边框，自动适配任意数量的图并居中排列成网格布局，达到固定图位的效果。

二、具体操作步骤 #

1. 准备背景图（可选） #

若使用自定义带边框背景图，先将背景图保存为stroke-bg.png，导入Anki媒体库：

• 打开Anki卡片模板编辑界面，点击「添加媒体」按钮上传图片；
• 或直接将图片放入Anki媒体文件夹（Windows：%APPDATA%\Anki2\你的用户名\collection.media；Mac：~/Library/Application Support/Anki2/你的用户名/collection.media）。

2. 修改卡片模板 #

打开目标卡组的「卡片」编辑界面，分两步修改：

（1）调整字段容器

找到显示笔顺图的字段（如插件生成的{{Kanji Stroke Order}}），用带类名的div包裹：

<div class="stroke-grid">
  {{Kanji Stroke Order}}
</div>

（2）添加CSS样式

切换到「样式」标签，粘贴以下代码，可按需调整参数：

/* 网格布局容器：自动适配列数，所有图居中排列 */
.stroke-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; /* 图与图之间的间距 */
  justify-items: center; /* 每个图在网格内水平居中 */
  align-items: center; /* 每个图在网格内垂直居中 */
  padding: 10px;
}

/* 单个笔顺图样式：添加背景/边框 */
.stroke-grid img {
  /* 方案1：白色边框+背景（无需自定义图） */
  background-color: #ffffff;
  padding: 8px; /* 控制白色边框宽度 */
  border-radius: 4px; /* 可选：给边框加圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加轻微阴影增强立体感 */

  /* 方案2：自定义背景图（替换上方背景色和padding） */
  /* background: url('stroke-bg.png') no-repeat center center; */
  /* background-size: contain; */
  /* padding: 10px; 调整留白让图与背景边框适配 */

  max-width: 100%;
  height: auto;
}

3. 预览调整 #

点击「预览」查看效果，可根据实际显示修改参数：

• 调整minmax(120px, 1fr)中的120px，改变网格列最小宽度；
• 修改gap值调整图间距；
• 调整padding值改变边框/背景留白大小。

三、补充说明 #

• 若插件生成的是SVG而非IMG标签，将CSS中的.stroke-grid img改为.stroke-grid svg即可；
• 使用自定义背景图时，尽量保证背景图比例与笔顺图匹配，避免拉伸变形。

内容的提问来源于stack exchange，提问作者Picke