WordPress：在图像前放置带有透明背景的较小图像

Question

我想在WordPress中的标题图像前放置一个带有透明背景的较小图像。我目前使用的主题允许我设置自己的CSS样式，但我不知道如何实现我的目标。

有人已经就此工作了吗？

非常感谢，

安东

Answer 1

以下是如何将图像放在另一个图像前面的示例。我把一只蜜蜂的PNG放在横幅图片里。

HTML

<div id="container">
  <img id="banner" src="https://www.mortcap.com/images/sample_report_banner.png">
  <img id="bee" src="https://orig00.deviantart.net/672c/f/2014/320/3/1/bee_png_stock_by_karahrobinson_art-d86m7bq.png">
</div>

CSS

#container {
  position: relative;
}

#banner {
  width: 600px;
}

#bee {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 20px;
  width: 100px;
}

当我们设置position: absolute时，该元素将始终相对于最近的父position: relative（或absolute）。然后，您可以使用top, bottom, left, right css属性优化绝对定位元素的位置。

使用this fiddle

进行游戏