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

Question

我正在尝试为我们的非营利组织创建一张动态更新日期的会员卡。是否可以在 Wordpress 媒体库内容（我上传的图像？）之上添加 z-index 元素（例如短代码）。

基本上，我需要为我们的非营利会员添加一个动态日期（当前月份和年份）到会员卡的数字版本。我已经尝试过 svg 并且无法将其上传到媒体库，即使使用“安全 SVG”插件也是如此，所以我试图找到另一种方法来将此动态元素添加到图形中。我也尝试过用 CSS 设计它，并且非常接近，但无法让“Outdoor Women's Alliance”正确排列，所以我停在那里。我目前在网站上拥有的是一个静态 .png，我必须每个月更新它，看起来像这样：

我希望它有日期（2018 年 7 月），我希望能够添加一个动态日期，该日期将在每个新月初更新，这样我就不必每个月创建一个新图形并上传它——它只会更新到新的月份（例如下个月会自动更新为“2018 年 8 月”）等，然后也会随着年份的变化而更新。

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

PS 卡片不一定要像这样，但应该有我们组织的名称、徽标和“指南成员”标题（以及日期:)。是的，我知道会员卡上应该有会员的名字，但我还没有弄清楚如何从我们的会员列表中填充它。:)

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

标签： wordpressimagegraphicsz-index

Answer 1

你可以试试这个。只需通过删除月份和年份来替换您的图像，并将 font-family 设置为新添加的文本（类文本），以便它可以匹配文本“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>