css3 - para - ¿Cómo puedo evitar las bandas de degradado CSS?

fondo degradado html5

Question

Empecé a usar degradados de CSS, en lugar de imágenes reales, por dos razones: primero, el gradiente de CSS definitivamente carga más rápido que una imagen, y segundo, no se supone que muestren bandas, como tantos gráficos de trama. Comencé a probar mi sitio en varias pantallas recientemente, y en las más grandes (más de 24 pulgadas), el degradado lineal CSS que constituye el fondo de mi sitio muestra bandas muy visibles. Como solución provisional, he superpuesto el degradado con una imagen de ruido PNG transparente, repetitiva y pequeña, lo que ayuda un poco. ¿Hay alguna otra forma de solucionar este problema de bandas?

Answer 1

Hice un "scatter.png" para poner con mi gradiente. Me gusta esto:

1. Gimp abierto
2. Imagen 100x100
3. Agregar canal alfa
4. Filtros -> Ruido -> Lanzar ... Aceptar valores predeterminados
5. Establecer la opacidad al 5%

6. Guarde y luego agregue al degradado.

   background: url(''/img/scatter.png''), linear-gradient(50deg,#d00 0,#300 100%);

Es un efecto sutil en un efecto sutil.

Answer 2

Para una respuesta de CSS puro, puede utilizar un filtro de desenfoque para agregar desenfoque al degradado de css y aliviar las bandas. Puede significar una reconstrucción de la jerarquía para no difuminar el contenido y debe ocultar el desbordamiento para obtener bordes nítidos. Funciona muy bien en un fondo animado donde el problema de las bandas puede ser especialmente grave.

.blur{
  overflow:hidden;
  filter: blur(8px);
}

Answer 3

Puede obtener resultados ligeramente mejores haciendo que su gradiente pase del primer color a transparente, con un background-color debajo para su segundo color. También recomiendo jugar con background-size de background-size para degradados grandes que se extienden por la pantalla, por lo que el degradado no llena toda la pantalla.

Answer 4

Realmente no hay ningún método para eliminar las bandas. Los degradados CSS están a merced de los diversos motores de renderizado de los navegadores. Algunos navegadores simplemente rinden mejor que otros. Lo mejor que puede hacer es cubrir áreas cortas y gamas de colores más grandes para aumentar los pasos del gradiente ... Luego, espere a que mejore el desgarro del navegador.

Answer 5

Sé que este problema se resolvió durante mucho tiempo, pero para otros que experimentaban bandas y buscaban una solución, una solución muy sencilla para mí era simplificar los colores que incluía en mi gradiente. Por ejemplo:

Este gradiente produce bandas:

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

Este degradado no, y se ve más o menos lo mismo:

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);

Answer 6

Sé que no le gustará el sonido de esto, pero la única manera real ahora mismo de obtener una consistente estética de navegador cruzado en este caso, es usar una imagen repetitiva.

Si se trata de un degradado lineal simple, solo necesita que sea de 1px de ancho y tan alto como el degradado, luego haga que el color de fondo de la página sea el color final del degradado para que funcione sin problemas. Esto mantendrá el tamaño del archivo diminuto.

Si desea reducir las bandas de degradado en su imagen, use un PNG (no transparencia) ya que considero que estos son más adecuados que los JPG para este propósito.

En Adobe Fireworks, exportaría esto como PNG-24.

Buena suerte.

http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}