Question

我的nuxt应用程序中有两个页面，两个页面的背景应该不同。但是，一个背景会覆盖另一个背景

index.vue


<style scoped>
body {
  background-color: #ffffff;
}
#banner {
  background-image: url("~assets/img/newbg.png");
}
</style>

login.vue

<style >


body {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.4)
    ),
    url("~assets/img/starter_image.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
}
</style>

login.vue的背景将覆盖index.vue。如果范围改变了login.vue页面的样式。

Answer 1

它肯定会覆盖样式，因为您没有使用scoped属性，这将允许它覆盖父组件的样式。

如果您想在Login.vue中拥有另一个背景

那么这可能会有所帮助：

内部Login.vue

HTML ：

<div id="wrapper" v-bind:style="bgc">
    *Write your html here*
</div>

CSS

#wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #111;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: 0.5s;
}

JS

new Vue({
    el: '#wrapper',
    data: {
        bgc: {
            backgroundColor: ''
        }
    }
})

Answer 2

index.vue

    <style scoped>
    body {
      background-color: #ffffff;
    }
    #banner {
      background-image: url("~assets/img/newbg.png");
    }
    </style>

  login.vue

    <style scoped>

    body {
      background-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.9),
          rgba(0, 0, 0, 0.4)
        ),
        url("~assets/img/starter_image.jpg");
      background-position: center;
      background-size: cover;
      position: relative;
    }
    </style>

您可以对您的组件使用作用域，而作用域不会影响其他组件。有两个不同的组件（登录，索引）。

作用域样式影响其他页面

2 个答案: