JavaScript — плавающий прозрачный PNG над текстом

Плавающий прозрачный PNG над текстом

Я хочу добавить полупрозрачное изображение типа штампа на определенную часть текста. Мы используем Vue для создания нашего нового веб-сайта.

Я действительно не нашел ничего о том, как сделать это в VUE.

Я хочу разместить изображение над 4-й строкой кода, показанного ниже. По сути, он отображает текст «Отчет принят:» вместе с лицом, принявшим отчет, взятый из базы данных. Я хотел бы показать это с перекрывающимся изображением, которое напоминает печать одобрения.

введите описание изображения здесь

  {amp}lt;template{amp}gt; {amp}lt;div class="clearfix"{amp}gt; {amp}lt;span{amp}gt;Report accepted by:{amp}lt;/span{amp}gt; {amp}lt;span v-if="report_info.accepted {amp}amp;{amp}amp; report_info.accepted_by !== null"{amp}gt;{{ memberById(report_info.accepted_by).callsign }}{amp}lt;/span{amp}gt; {amp}lt;button v-if="isAdmin" class="float-right" v-on:click="acceptRejectReport" {amp}gt;{{ acceptButtonText }}{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; 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 ={amp}gt; 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(), }); } } } {amp}lt;/script{amp}gt; {amp}lt;style scoped{amp}gt; {amp}lt;/style{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector