0
233
ViewsRelleno de cuerpo extraño (VueJS + Nuxt, CSS)
Tengo un pequeño VueJS + NuxtJS y tiene un gif de fondo. Por ahora se ve así:
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; } } Como puede, lo tengo en todo el cuerpo, pero realmente no lo necesito, este gif de fondo debe estar solo en unas pocas páginas, entonces, si cambia body a classname (digamos main ) y usa esta clase así:
<template> <div class='main'> <Header /> </div> </template>Tendré ese extraño relleno:
¿Cómo puedo arreglar esto?
1 answers
Answer question0
Suponiendo que la plantilla que se muestra es el componente raíz representado...
Mover esos estilos del body a un nombre de clase haría que los estilos predeterminados de <body> usaran márgenes predeterminados según el agente de usuario, lo que probablemente sea la causa del "relleno extraño" que mencionó.
Si desea mantener los márgenes originales antes de realizar el cambio, conserve solo el estilo de 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>