css - imagenes - ¿Podemos resolver el problema de la imagen de fondo de la fila de la tabla, en chrome, en tablas multicelulares?

tablas en html5

Question

Se pregunta con frecuencia, pero todavía no he visto una buena respuesta (y la busqué). Si configura una imagen de fondo en CSS en una fila de la tabla, la imagen se repetirá en cada celda. Si configura la position: relative (para la fila) y establece la background-image: none (para las celdas) resuelve el problema en IE pero no en Chrome. No puedo usar el posicionamiento de fondo ya que hay muchas llamadas y su tamaño varía. (Y la imagen no es simétrica: es un fundido de un lado. ¿Alguien?

Ejemplo para el código css:

tr { height: 30px; position:relative;}
tr.green { background: url(''green_30.png'') no-repeat left top; }
tr.orange { background: url(''oranger_30.png'') no-repeat left top;}
tr.red { background: url(''red_30.png'') no-repeat left top; }
td { background-image: none; }

El HTML es básico: una tabla de múltiples celdas.

El objetivo es que los colores se desvanezcan en cada fila, pero podría ser cualquier imagen que no sea de patrón.

Answer 1

Agregue float: a la izquierda, eso debería arreglarlo.

tr {float:left;}

Answer 2

Ok, pasé mucho tiempo leyendo sobre esto, y no pude encontrar una solución fácil para todos los navegadores, pero como veo que estás usando filas de altura fija, he desarrollado mi propia solución alternativa: http://jsfiddle.net/DR8bM/

Básicamente, en lugar de poner la imagen de fondo en la fila, la coloca en un div en posición absoluta en la primera celda de cada fila (y la expande para llenar toda la fila). Esto es un poco hacky, pero puede ser la única manera confiable de lograr lo que quieres.

Answer 3

Probado en Chrome 54 en Windows 10:

tr {
background-attachment: fixed;
}

Aunque parece que no está exento de errores: la imagen de fondo solo se repite en toda la ventana gráfica al momento de la carga, lo que significa que las celdas que aparecen cuando se desplaza hacia abajo no tienen el fondo.