如何将 svg 图像添加到 html/css 网站的中间，但同时也遮盖图像库

Question

我想在我的网站上添加一个画廊，但不确定从哪里开始。这个想法是，中间有一个 iPod，如果您单击左右“按钮”，它将充当图库中的箭头来更改图片。因此，iPod 充当了图片的遮罩，但它本身在屏幕中央是静态的。我该怎么做呢？对于我正在从事的一个项目。不允许使用任何库，只有在绝对必要时才必须是纯 html/css 和 javascript。

我有一个在figma上创建并导出的ipod的SVG文件，所以我认为它只是作为图像。

我尝试将 SVG 作为图像添加到 HTML 文件中的所有背景内容之后，但它似乎没有做任何事情。理想情况下，将添加此功能，然后用户将能够单击左右两个按钮在图片之间切换。本质上充当一个窗口。我对编码相当陌生，所以我不确定从哪里开始/如何正确地处理它

我尝试将其添加到 html 中，但它没有执行任何操作，我相信 svg 本身没问题。这是一个超级基本的网站，这个页面除了背景和标题之外没有任何内容。

 <div id="home">
        <svg height="100" width="200" >
          <a href="/graphics/ipod.svg" >
          </a>
        </svg>
  </div>

*/ this is the CSS code for the home id
#home {
    width:100%;
    margin: 0 auto;
    font-family: Kimberlie;
}

提前致谢

Answer 1

我认为你问的叫做“Carousel”。 尝试先将 div 居中，然后在图像容器中使用弹性框并将方向更改为行。使用 javascript 更改 svg 图像。 不要使用直接 svg，而是使用它来添加 svg。

<img src="https://placeholder.pics/svg/400x200/3C3FFF-FFD7FC/000000-000000">