[英]Cannot add a background color to html element outside of App.Vue
首先，谢谢您阅读我的问题！
我想在Vue页面上添加背景色，更具体地说是渐变色。 并非所有页面，只有一页。 但是当我在components / Frontpage.Vue中写这个时
html {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
它不起作用，背景保持白色。 但是，当我将完全相同的代码放入App.Vue中时，它可以完美运行。 我可以通过导入外部CSS解决该问题。 但这看起来并不干净。 有人有解决方案吗？
编辑：所以基本上：我必须把我的背景，因为它只能显示在此页面上。 但是因为它是作用域的，所以我无法访问'html'元素。
非常感谢您阅读我的问题，即使您不能帮助我。 这是我在StackOverflow上的第一篇文章！
这可能是因为您在style标签中设置了scope属性：
<style scoped>
html {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
</style>
https://vue-loader.vuejs.org/en/features/scoped-css.html
当标签具有scoped属性时，其CSS将仅应用于当前组件的元素。
删除范围属性以使CSS起作用，或者如果您不希望每个CSS都不受作用，则可以添加多个样式标签。
<style>
html {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
</style>
<style scoped>
h1 {
color: white;
}
</style>
要使<html>在更改页面时使用不同的样式，
router.afterEach((to, from) => {
if (to.name === "page2") {
document.querySelector("html").classList.add("page2");
} else {
document.querySelector("html").classList.remove("page2");
}
});
<style>
html.page2 {
background-color: gray;
}
</style>
您还可以使用Vue生命周期方法添加或删除类。
created() {
document.querySelector("html").classList.add("someClass");
},
destroyed() {
document.querySelector("html").classList.remove("someClass");
}
然后确保该css类位于作用域块之外的单独样式块中。
<style>
.someClass {
background: red;
}
</style>
<style scoped>
... rest of your css
</style>
祝好运！
因此，感谢所有提供帮助的人，但我找到了解决方法。
在App.vue中，我把这个
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
这样，我不必访问html即可编辑整个页面背景。 现在components / frontpage.vue中的最高元素（这是一个大）本身就是整页，因此现在我可以将我的背景放在标签中。
#Frontpage {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
现在，我的页面具有全屏蓝色背景，当我转到另一页面时，该背景立即消失。 无需刷新。
从同级路由器视图组件中更改插入到 App.vue 中的 NavBar 的背景颜色
[英]Alter background color of NavBar inserted in App.vue from within sibling router-view component
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.