我们可以解决表行背景图像问题，在chrome，在多单元格表？ [英] Can we solve the table row background image problem, in chrome, in multi celled tables?

问题描述

这是经常问的 - 但我还没有看到一个好的答案（和我看）。如果将CSS中的背景图像设置为表格行，则图像将在每个单元格中重复。如果你设置 position：relative （对于行）并设置 background-image：none ）它解决了IE上的问题，但不是铬！我不能使用背景定位，因为有很多电话，它们的大小不同。

It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the background-image: none (for the cells) it solves the problem on IE but not on chrome! I can't use background positioning since there are many calls and their size varies. (And the picture is not symmetrical- It's a fade out from one side. Anybody??

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; }

HTML是基本的表。

The HTML is basic - A multi cell table.

目标是使不同的颜色淡入每一行，但它可以是任何非模式图像。

The goal is to have different colors fade into every row, but it could be any non-pattern image.

推荐答案

好吧，我花了很多年的时间阅读这个，并找不到一个简单的修复所有浏览器，但是我看到你使用固定高度的行，我自己的解决方法： http://jsfiddle.net/DR8bM/

Ok, I spent ages reading about this, and couldn't find an easy fix for all browsers, but as I see you are using fixed height rows, I've developed my own workaround: http://jsfiddle.net/DR8bM/

基本上，不是将背景图像放在行上，而是将其放在每行第一个单元格的绝对定位的div（并展开它以填充整行）。这是稍微有点黑，但可能是唯一可靠的方式来实现你想要的。

Basically, instead of putting the background image on the row, you put it on an absolute-positioned div in the first cell of each row (and expand it to fill the whole row). This is slightly hacky, but may be the only reliable way to achieve what you want.

这篇关于我们可以解决表行背景图像问题，在chrome，在多单元格表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！