Question

我有一个与data.json文件交互的组件游戏，我的所有数据都在其中（包括不同的背景图片）。在页面游戏中，我想要不同的背景，所以我做到了：

v-bind:style="{ 'background': 'url('+ step.img +')' + 'no-repeat center fixed'}"

但是当我在列表中添加“ cover”时，图像将从视口中消失。

路径为/game/:id，因此这就是您转到同一组件中一页到另一页的方式。

PS：这是一个存在多个解决方案问题的游戏，您必须选择一个解决方案并转到下一个解决方案...

v-bind:style="{ 'background': 'url('+ step.img +')' + 'no-repeat center fixed cover'}"

不起作用

这是在我的data.json文件中：

"img": "../assets/images/bg1.png"

@DrCord这是我写的

<template>
  <div rel="preload" v-bind:style="{ 'background': 'url('+ step.img +')' + 'no-repeat center fixed' }">
  <section>
       <h1>{{ step.title }}</h1>
    </section>
   
    <ul>
      <li v-on:click="doActions(action)" 
        v-for="action in step.actions" 
        :key="action.step"
        v-show="canDoAction(action)"
      >

      </li>

    </ul>
  </div>
</template>

@Daniel您是说一个img标签吗（对不起，我是一个初学者）

Answer 1

根据紧凑背景属性模式下的W3C documentation封面，应在/之前使用'url('+ step.img +')' + 'no-repeat center / cover'，例如：<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="el"> <div rel="preload" :style="{ 'background': 'url('+ step.img +')' + 'no-repeat center / cover' }"> <section> <h1>{{ step.title }}</h1> </section> <ul> <li @click="doActions(action)" v-for="action in step.actions" :key="action.step" v-show="canDoAction(action)" > </li> </ul> </div> </div> <script> new Vue({ el: '#el', data: { step: { title: 'This is title', img: 'https://via.placeholder.com/1000' } } }) </script>，请在下面查看我的工作摘要答案。

performBatchUpdates

vue.js-桌面上视口大小覆盖的背景图像问题

1 个答案: