javascript - 在文字上 float 透明PNG

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

我还没有发现有关如何在vue中执行此操作的任何信息。

我想将图像放置在下面显示的代码的第4行上。基本上，它的作用是显示“报告接受者：”文本以及接受来自数据库的报告的人。我想用重叠的图像来显示它，类似于认可印章。

  <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>

最佳答案

已经具有逻辑...您只需要实际提供img元素作为该范围内的最后一个子元素即可。您的跨度将需要具有css position：relative，而img需要css position：absolute; top：0; right：0; ...您可能需要在跨度上使用display：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>

关于javascript - 在文字上 float 透明PNG，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58420377/