Vue:设置背景图片&解决background-color不生效问题

在画页面时, 想给页面设置背景图, 采用如下的方案
页面 index.vue 部分如下

<template>
  <div>
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div class="index">
      <Header>
      ...
      </Header>
      <div style="">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

页面 index.vue 样式部分如下

.background {
  position: fixed;
}

效果如下

这时, 想给

这一部分设置背景颜色为白色

<template>
  <div>
    <div class="overview">
      ...
    </div>
  </div>
</template>

样式如下

.overview {
  margin: 20px auto;
  height: 100%;
  width: 70%;
  background-color: white;
}

发现设置 background-color: white 样式不生效

这时, 只需要设置 position 属性即可

.overview {
  position: relative;
  margin: 20px auto;
  height: 100%;
  width: 70%;
  background-color: white;
}

效果图如下:

参考资源:
[1] background-color不显示颜色
[2] 如何给vue页面添加背景图片