无法在App.Vue之外的html元素中添加背景色
[英]Cannot add a background color to html element outside of App.Vue
问题描述
first of all, thank you for reading my question! 
首先，谢谢您阅读我的问题！
I am looking to add a background color, a gradient more specifically, to a Vue page. 我想在Vue页面上添加背景色，更具体地说是渐变色。 Not all pages, but just one. 并非所有页面，只有一页。 But when I write this in components/Frontpage.Vue 但是当我在components / Frontpage.Vue中写这个时
html {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
it doesn't work, the background stays white. 它不起作用，背景保持白色。 But when I put the exact same code in App.Vue, it works perfectly. 但是，当我将完全相同的代码放入App.Vue中时，它可以完美运行。 I can work around that issue by importing an external css. 我可以通过导入外部CSS解决该问题。 But it doesn't look really clean. 但这看起来并不干净。 Does someone have a solution? 有人有解决方案吗？
EDIT: So basically: I have to put my background in because it can only be displayed on this page. 编辑：所以基本上：我必须把我的背景，因为它只能显示在此页面上。 But because it is scoped, I can't access the 'html'-element. 但是因为它是作用域的，所以我无法访问'html'元素。
Thank you very much for having read my question, even if you cannot help me. 非常感谢您阅读我的问题，即使您不能帮助我。 It's my first post on StackOverflow! 这是我在StackOverflow上的第一篇文章！
3 个解决方案
解决方案1
3 2018-02-25 18:20:50
This is probably because you have scoped attribute in the style tag: 这可能是因为您在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
When a tag has the scoped attribute, its CSS will apply to elements of the current component only.
Remove the scoped attribute to make your css work, or you can add multiple style tags if you don't want every css to be unscoped 删除范围属性以使CSS起作用，或者如果您不希望每个CSS都不受作用，则可以添加多个样式标签。
<style>
html {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
</style>
<style scoped>
h1 {
color: white;
}
</style>
edit1 EDIT1
To make <html> use different style when change page, 要使<html>在更改页面时使用不同的样式，
1. toogle class in vue-router's afterEach hook 1. Vue路由器的afterEach钩子中的toogle类
router.afterEach((to, from) => {
if (to.name === "page2") {
document.querySelector("html").classList.add("page2");
} else {
document.querySelector("html").classList.remove("page2");
}
});
2. add html.page2 style 2.添加html.page2样式
<style>
html.page2 {
background-color: gray;
}
</style>
3. Example: 3.范例：
解决方案2
1 2018-04-07 05:48:52
You can also use Vue lifecycle methods to add or remove classes. 您还可以使用Vue生命周期方法添加或删除类。
created() {
document.querySelector("html").classList.add("someClass");
},
destroyed() {
document.querySelector("html").classList.remove("someClass");
}
Then make sure to have that css class in a separate style block outside of your scoped block. 然后确保该css类位于作用域块之外的单独样式块中。
<style>
.someClass {
background: red;
}
</style>
<style scoped>
... rest of your css
</style>
Good luck! 祝好运！
解决方案3
0 2018-02-25 19:41:24
So, Thank you for all who helped, but I found a workaround. 因此，感谢所有提供帮助的人，但我找到了解决方法。
In the App.vue I put this 在App.vue中，我把这个
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
That way I don't have to access the html to edit the full page background. 这样，我不必访问html即可编辑整个页面背景。 The highest element there is in components/frontpage.vue (which is one big ) is now itself full page, so now I can put my background on this element in a tag. 现在components / frontpage.vue中的最高元素（这是一个大）本身就是整页，因此现在我可以将我的背景放在标签中。
#Frontpage {
background: linear-gradient(45deg, #17ead9, #6078ea);
height: 100vh;
margin: 0;
background-attachment: fixed;
}
Now my page has a full screen blue background that immediately disappears when I go on another page. 现在，我的页面具有全屏蓝色背景，当我转到另一页面时，该背景立即消失。 Without having to refresh it. 无需刷新。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.