我有一點 VueJS NuxtJS，它有背景 gif。現在它看起來像這樣：
body {
margin: 0 auto;
background: url("assets/video/background-darked.gif") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
@media only screen and (max-width: 860px) {
overflow-y: scroll;
}
}
正如你可以在整個身體上使用它，但我真的不需要它，這個背景 gif 應該只在幾頁上，所以，如果更改body為類名（假設main）并像這樣使用這個類：
<template>
<div class='main'>
<Header />
</div>
</template>
我會有那個奇怪的填充：
我該如何解決這個問題？
uj5u.com熱心網友回復：
假設顯示的模板是呈現的根組件...
將這些樣式從body類名移動到類名后， default<body>的樣式將使用基于用戶代理的默認邊距，這可能是您提到的“奇怪的填充”的原因。
如果您想保留更改前的原始邊距，請僅保留margin樣式：
// MyPage.vue
<style>
body {
margin: 0 auto;
}
.main {
background: url("assets/video/background-darked.gif") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
@media only screen and (max-width: 860px) {
overflow-y: scroll;
}
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380339.html
標籤：javascript html css Vue.js nuxt.js