css - 作用域样式影响其他页面

Question

我的 nuxt 应用程序中有两个页面，两个页面应该有不同的背景。然而一个背景压倒了另一个

索引.vue

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

登录.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: ''
        }
    }
})