可能的话：如何在Wordpress中将z-index应用于媒体库图像？

Question

我正在尝试为我们的公益组织创建一个具有动态更新日期的会员卡。是否可以在Wordpress媒体库内容（我上传的图像）的顶部添加z-index元素（例如，简码）？

基本上，我需要为非营利会员的数字版本的会员卡添加动态日期（当前月份和年份）。我尝试了svg，即使使用“ Safe SVG”插件也无法将其上传到媒体库，所以我试图找到另一种方法来将此动态元素添加到图形中。我也尝试过在CSS中进行设计，并且距离很近，但是无法使“室外女性联盟”正确地排列起来，所以我就停在那里。我目前在网站上拥有的是一个静态.png文件，每个月都需要更新一次，它看起来像这样：

我希望有日期（2018年7月），我希望能够添加一个动态日期，该日期将在每个新月的开始时更新，因此我不必每次都创建一个新图形月份并将其上传-它只会更新到新的月份（例如下个月将自动更新为“ 2018年8月”，依此类推，然后也会随着年份的变化进行更新。

我有一个插件，该插件可帮助您动态设置月份/年份，以使用简码更新每个月，因此我想删除该卡上的日期，并尝试使用定位和z-index在html中覆盖简码。 （当然，不必使用插件会更好。）

P.S。该卡不必看起来像这样，但应具有我们组织的名称，徽标和“指南成员”标题（以及日期：）。是的，我知道会员卡上应该有会员的名字，但是我还没有弄清楚如何从会员列表中填充会员的名字。 ：）

关于z-index或在图片顶部插入动态日期的任何想法？这可能还是有更好的解决方法？

Answer 1

您可以尝试一下。只需删除月份和年份来替换图像，然后将字体家族设置为新添加的文本（类文本），以使其与文本“ Guide Member”相匹配即可。

 <style type="text/css">
        .container {
    position: relative;
    }
   .text {
   position: absolute;
   top: 75%;
   left: 10%;
   transform: translate(-50%, -50%);
   font-size: 22px;
   font-weight: bold;
}
        </style>
   <div class="container">
  <img src="test.png" alt="Snow" style="">
  <div class="text">November 2018</div>

</div>