如何在Vue JS + Bootstrap应用程序中用动态内容填充背景图像？

Question

因此，我一直试图设置应用程序背景，但是当我使用v-for渲染动态内容时，此白色块显示在应用程序背景上方。有没有人遇到这个问题，我已经尝试解决了几个小时。似乎我的背景已经完全伸展了。谢谢

<template>
  <div id="app">
    <div class="container">
      <div class="row my-row mt-5">
        <div v-for="n in 20" :key="n" class="col-10 col-lg-3 col-md-5 my-col mt-5 mt-lg-0">
          <img class="img" src="../assets/vinyl.png" alt="Store Images" />
        </div>
    </div>
    </div>
  </div>
</template>

#app{
  background: url("./assets/background.svg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container{
  height: 100vh;
}

Answer 1

代替高度，您可以使用min-height: 100vh;

.container {
  min-height: 100vh;
}

#app {
  background: blue;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 100px;
}

.long{
  height: 1500px;
  width: 100%;
  background: red;
}

 <div id="app">
   <div class="container">
    <div class="long">
    </div>
   </div>
 </div>

https://jsfiddle.net/z01wbdmq/

Answer 2

body {   
  background: url("./assets/background.svg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   }

看起来像改变身体一样。