如何在 html 中将 SVG 放置在 PNG 之上

Question

如何将 SVG 徽标放在 PNG 图像的顶部并居中？

这是我的图片：

这就是我需要的。

这是我的 SVG 文件：它是最底部的一个，白色。 svg

感谢任何帮助。我必须在顶部制作很多带有不同徽标的横幅。

Answer 1

这是一个简单的示例，说明如何使用 HTML/CSS 将两个图像放在彼此之上。注意使用 background-position-y 属性从组合精灵中选择白色徽标。

.outer-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 413px; /* keep ratio */
  height: 66px; /* keep ratio */
  background-image: url('https://i.stack.imgur.com/GWrGs.png');
  background-size: 100%;
}

.inner-img {
  flex: 0 0 auto;
  width: 40px; /* this depends on inner shape */
  height: 40px;
  background-image: url('https://svgshare.com/i/bBX.svg');
  background-size: 40px 160px; /* keep ratio of SVG canvas */
  background-position: 0 -120px; /* display white variant */
}

<div class="outer-img"><div class="inner-img"></div></div>

如果您需要制作单个媒体项目，请查看 this 问题。

如何在 html 中将 SVG 放置在 PNG 之上

How to place an SVG on top of an PNG in html

html

svg

bootstrap-4