Cómo eliminar las rayas que aparecen cuando se usa la propiedad de degradado lineal [duplicado]
Cuando se utiliza la propiedad CSS de gradiente lineal, el fondo aparece sin rayas cuando se utiliza izquierda y derecha como valor de dirección. Pero cuando el valor de dirección se proporciona como superior o inferior, aparecen rayas en el fondo. ¿Hay alguna manera de que podamos quitar las rayas?
Aquí está el código:
body {
background: linear-gradient(to top, red, yellow);
}
Te enfrentas a una compleja propagación en segundo plano sobre la que puedes leer aquí . Intentaré explicarlo con palabras sencillas.
Tu bodytiene una altura igual a 0; por lo tanto, el fondo no será visible en él, pero de forma predeterminada tiene 8pxun margen que crea una altura 8pxen el htmlelemento.
¿Por qué no 16 px de altura (8 px para la parte superior + 8 px para la parte inferior)?
Dado que la altura del cuerpo es 0, nos enfrentamos a un margen que se colapsa y ambos márgenes colapsarán en uno solo y tenemos una altura de 8px.
Luego tenemos una propagación de fondo desde bodyhasta htmly linear-gradientcubrirá la altura de 8px .
Finalmente, el fondo del html se propaga al elemento lienzo para cubrir toda el área, lo que explica por qué el degradado lineal se repite cada uno 8px.
body {
background: linear-gradient(to top, red, yellow);
}También se repite cuando se usa la dirección izquierda o derecha, pero no lo verás visualmente, lo cual es lógico ya que es el mismo patrón:
body {
background: linear-gradient(to right, red, yellow);
}También puedes quitar la repetición y verás que solo cubre8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;
}Para evitar este comportamiento, simplemente puede configurar height:100%(o min-height:100%) en elhtml
html {
height: 100%;
}
body {
background: linear-gradient(to top, red, yellow);
}También funcionará con no-repeat, ya que de forma predeterminada linear-gradientcubrirá todo:
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}
Esto se debe a que la altura calculada de <body>resulta de la altura de su contenido. Cuando sea más pequeño que la altura de la ventana gráfica, el fondo se repetirá:
Mostrar fragmento de código
Para asegurarse de que se extienda (y el degradado de fondo) a lo largo de toda la altura de la ventana gráfica, debe darle <body>un min-heightvalor igual a la altura de la ventana gráfica ( 100vw):
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
}
Mostrar fragmento de código
Como @TemaniAfif señaló en los comentarios, la razón técnica para lo anterior es: hay una diferencia entre el elemento raíz, que cubre toda la ventana gráfica y hereda su fondo <body>, y el <body>elemento, que, como se especifica, puede ser más pequeño que el ventana gráfica. Según la recomendación del W3C :
El fondo del elemento raíz se convierte en el fondo del lienzo y cubre todo el lienzo, anclado (para 'posición de fondo') en el mismo punto que estaría si se pintara solo para el elemento raíz. El elemento raíz no vuelve a pintar este fondo.
