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页面添加背景图片

你可能感兴趣的:(vue初学,vue)