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一起玩arround