online - gradiente lineal css

Patrón de tablero de gradiente CSS

Question

Quiero crear un patrón de tablero de ajedrez usando gradientes. He encontrado un ejemplo y lo he modificado según mis necesidades, sin embargo, solo funciona con el prefijo -moz . Cuando -moz prefijo -moz , el patrón es completamente diferente.

¿Cómo puedo hacer que este patrón de tablero de ajedrez linear-gradient moz funcione con un degradado linear-gradient prefijo?

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

Answer 1

Esta fue la implementación de Chrome para cuando abrió una imagen con transparencia durante un tiempo (aunque más tarde la eliminó para usar solo un fondo sólido).

element {
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}

Answer 2

La versión de 45 grados funciona bien, pero puede terminar mostrando una línea entre los triángulos en diferentes niveles de zoom o en pantallas de retina. Dependiendo de los navegadores que necesite admitir, también puede usar el background-blend-mode: difference (actualmente, casi no se caniuse en un 90%), puede teñir los controles utilizando una imagen de fondo adicional:

body {
    background-image: /* tint image */
                      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
                      /* checkered effect */
                      linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to bottom, black 50%, white 50%);
    background-blend-mode: normal, difference, normal;
    background-size: 2em 2em;
}

Answer 3

Solo modifique la background-position como en el siguiente fragmento de código para obtener la salida requerida. Esto funciona bien en Firefox, Chrome, Opera, IE11 y Edge.

body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

El problema parece estar ocurriendo debido a una diferencia en la forma en que los ángulos son manejados por el gradiente lineal de la -moz y el estándar. -45deg en el degradado lineal -45deg parece ser igual a 135deg en el gradiente estándar ( pero al cambiar el ángulo se produce un punto extraño en el centro ).

Las siguientes capturas de pantalla muestran la diferencia (ambas tomadas en la última versión de Firefox v44.0).

Salida con -moz-lineal-gradiente:

Salida con degradado lineal: