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

Question

所以我一直在尝试设置我的应用程序背景，但是当我使用 v-for 渲染动态内容时，这个白色 block 出现在我的应用程序背景上方。有没有人遇到过这个问题，我已经尝试解决这个问题几个小时了。看来我的背景已经完全拉伸(stretch)了。谢谢

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