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

问题描述

它经常被问到——但我还没有看到好的答案(我看了).如果您在 CSS 中将背景图像设置为表格行 - 该图像将在每个单元格中重复.如果您设置 position: relative (对于行)并设置 background-image: none (对于单元格)，它可以解决 IE 上的问题，但不能解决 chrome 上的问题！我不能使用后台定位，因为有很多调用并且它们的大小各不相同.(而且图片不是对称的 - 它是从一侧淡出.有人吗??

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屋！