如何在Marp/Markdown幻灯片的不同位置插入多张图片？

方案1：自定义CSS定位任意位置的多张图片 #

通过绝对定位的CSS类，可在幻灯片任意位置放置多张图片，完全自定义布局。

---
marp: true
---

<style>
/* 定义不同位置的图片样式 */
.img-top-left {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 100px;
}
.img-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 80px;
}
.img-sidebar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    left: 10px;
    width: 120px;
}
</style>

# 幻灯片标题

这里是幻灯片的主体内容...

<!-- 插入多张图片并应用对应样式 -->
<img src="/Users/dan.stancu/Pictures/markdown/img1.png" class="img-top-left" alt="左上角图片">
<img src="/Users/dan.stancu/Pictures/markdown/img2.png" class="img-bottom-right" alt="右下角图片">
<img src="/Users/dan.stancu/Pictures/markdown/img3.png" class="img-sidebar" alt="侧边图片">

方案2：在页眉/页脚插入多张图片 #

如果需要在页眉或页脚放置多张图片，直接在_header或_footer指令中写入多个图片标记，再用CSS调整样式即可。

---
marp: true
---

<!-- 页眉插入图片+文字，页脚插入两张图片 -->
<!-- _header: "![](/Users/dan.stancu/Pictures/markdown/header-logo.png) 演示文稿标题" -->
<!-- _footer: "![](/Users/dan.stancu/Pictures/markdown/footer-img1.png) ![](/Users/dan.stancu/Pictures/markdown/footer-img2.png)" -->

<style>
header img {
    height: 60px;
    vertical-align: middle;
    margin-right: 10px;
}
footer img {
    height: 50px;
    margin: 0 15px; /* 调整图片间距 */
}
</style>

# 幻灯片标题

主体内容区域...

方案3：背景图+前景多图组合 #

如果需要一张图片作为幻灯片背景，同时在前景放置多张图片，可以结合Marp的背景图设置和前景图片定位。

---
marp: true
backgroundImage: url('/Users/dan.stancu/Pictures/markdown/background.png')
backgroundSize: cover
---

<style>
.foreground-img-1 {
    position: absolute;
    top: 100px;
    right: 80px;
    width: 200px;
    border: 2px solid #fff;
}
.foreground-img-2 {
    position: absolute;
    bottom: 80px;
    left: 100px;
    height: 150px;
}
</style>

# 带背景图的幻灯片

这里是主体内容...

<img src="/Users/dan.stancu/Pictures/markdown/foreground1.png" class="foreground-img-1" alt="前景图1">
<img src="/Users/dan.stancu/Pictures/markdown/foreground2.png" class="foreground-img-2" alt="前景图2">

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