[英]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.