javascript - 在文本上 float 透明 PNG

Question

我希望在文本的特定部分添加半透明邮票类型图像。我们正在使用 vue 来构建我们的新网站。

我还没有真正找到任何关于如何在 vue 中执行此操作的信息。

我希望将图像放置在下面所示代码的第四行上。基本上，它的作用是显示“报告接受者:”文本以及接受从数据库获取的报告的人员。我想用类似于批准印章的重叠图像来显示它。

  <template>
  <div class="clearfix">
    <span>Report accepted by:</span>
    <span v-if="report_info.accepted && report_info.accepted_by !== null">{{ memberById(report_info.accepted_by).callsign }}</span>
    <button
      v-if="isAdmin"
      class="float-right"
      v-on:click="acceptRejectReport"
    >{{ acceptButtonText }}</button>
  </div>
</template>

<script>

import { mapState, mapGetters } from "vuex"

export default {
  name: "ReportApprovalComp",
  mounted ()  {

    this.checkAdmin();
  },
  data () {
    return {

      isAdmin: false
    }
  },
  computed: {

    acceptButtonText() {

      if(this.report_info.accepted){
        return "Revoke report acceptance";
      } else {
        return "Approve report";
      }
    },

    ...mapState("missionStore", {
      report_info: state => state.report,
    }),

    ...mapGetters("missionStore", [
      "memberById"
    ])
  },
  methods: {

    checkAdmin: async function () {

      this.isAdmin = await this.$auth.isAdmin(this.$options.name);
    },

    acceptRejectReport: async function () {

      this.$store.dispatch('missionStore/acceptRejectReport',
        {
          caller: this.$options.name,
          member_id: await this.$auth.getUserId(),
        });
    }
  }

}
</script>

<style scoped>

</style>

Answer 1

已经有了逻辑...您只需要实际提供您的 img 元素作为该范围内的最后一个子元素。你的跨度需要有CSSposition:relative，你的img需要CSSposition:absolute;顶部:0;右:0; ...您可能需要在您的跨度上显示:inline-block

<span v-if="report_info.accepted && report_info.accepted_by !== null" 
  style="position:relative;display:inline-block;">
    {{ memberById(report_info.accepted_by).callsign }}
    <img style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:100%;height:auto;" src="web path to img file"/>
</span>